我正在使用 @input
从父组件接收属性,以激活子组件元素之一中的CSS类 .
我从父接收的'm able to receive the property from parent and also activate the class. But this works only once. The property i' m是一个类型的布尔数据,当我从子组件将其状态设置为 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() { }
}
header/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) .
4 回答
还有另一种方式 . Plunkr . 我们想要的是一个单一的事实来源 . 我这次可以把它放在孩子身上 .
初始儿童:
searchStatus = false
在父模板中,将child的实例作为
#as
或任何名称 .使用
#as.searchStatus
和子this.searchStatus
更改父级中的searchStatus .另一种方法:使用rxjs / BehaviorSubject在不同组件之间传递状态 .
这是plunkr .
我用后缀'Rxx'命名主题,因此searchStatus的BehaviorSubject将是searchStatusRxx .
在父组件中初始化它,如
searchStatusRxx = new BehaviorSubject(false);
,使用@Input将其传递给子组件
在子模板中
,你做异步管道 .
在父级和子级中
,您执行
searchStatusRxx.next(value)
以更改最新值 .您需要使用双向数据绑定 .
@Input()
是单向数据绑定 . 要启用2路数据绑定,您需要添加对应于该属性的@Output()
,后缀为"Change"如果要将对属性所做的更改发布到父级,则需要通过以下方式通知父级:
在父级中,您需要为该属性使用banana-in-a-box表示法:
你也可以绑定到属性并在子进程发生变化时触发回调:
看plnkr
编辑你的代码一点点,它的工作原理和简单的imo . 告诉我你是否喜欢它 .
`` https://plnkr.co/edit/oJOjEZfAfx8iKZmzB3NY?p=preview