我正在使用@input从父组件接收属性,以激活子组件元素之一中的CSS类.
我能够从父母那里收到房产并激活班级.但这只能工作一次.我从父级接收的属性是一个类型的布尔数据,当我从子组件将其状态设置为false时,它在父级中不会更改.
普兰克:https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview
app.ts
import {Component,NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { HeaderComponent } from './header'; import { SearchComponent } from './header/search'; @Component({ selector: 'my-app',template: ` <app-header></app-header> `,}) export class App { name:string; constructor() { } } @NgModule({ imports: [ BrowserModule ],declarations: [ App,HeaderComponent,SearchComponent ],bootstrap: [ App ] }) export class AppModule {}
header.ts
import { Component,OnInit } from '@angular/core'; @Component({ selector: 'app-header',template: `<header> <app-search [getSearchStatus]="isSearchActive"></app-search> <button (click)="handleSearch()">Open Search</button> </header>` }) export class HeaderComponent implements OnInit { isSearchActive = false; handleSearch() { this.isSearchActive = true console.log(this.isSearchActive) } constructor() { } ngOnInit() { } }
页眉/ search.ts
import { Component,OnInit,Input } from '@angular/core'; @Component({ selector: 'app-search',template: `<div id="search" [class.toggled]="getSearchStatus"> search <button (click)="getSearchStatus = false" class="close">Close Search</button> </div>` }) export class SearchComponent implements OnInit { @Input() getSearchStatus: boolean; constructor() { } ngOnInit() { } }
请检查上面给出的plunker.打开搜索功能只能运行一次.关闭搜索后,它不会再次触发.
@input是否适用于此方案?请帮我解决这个问题. (请更新plunker).
您需要使用双向数据绑定.
原文链接:https://www.f2er.com/angularjs/143885.html@Input()是一种数据绑定方式.
要启用双向数据绑定,您需要添加对应于该属性的@Output(),并带有“更改”后缀
@Input() getSearchStatus: boolean; @Output() getSearchStatusChange = new EventEmitter<boolean>();
如果要将对属性所做的更改发布到父级,则需要通过以下方式通知父级:
this.getSearchStatusChange.emit(newValue)
在父级中,您需要为该属性使用banana-in-a-Box表示法:
[(getSearchStatus)]="myBoundProperty"
你也可以绑定到属性并在子进程发生变化时触发回调:
[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"