从 Angular 2 中的子组件更新父组件属性

Question

我正在使用@input从父组件接收属性，以便在子组件的一个元素中激活CSS类。

我能够从父级接收属性并激活类。但这只有效一次。我从父组件收到的属性是布尔数据类型，当我将其状态设置为从子组件false时，它在父组件中不会更改。

普伦克尔：https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

应用程序

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 {}

标头.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？请帮我解决这个问题。（请更新跳槽）。

Answer 1

您需要使用 2 路数据绑定。

@Input()是单向数据绑定。若要启用 2 路数据绑定，需要添加与属性对应的@Output()，并带有"Change"后缀

@Input() getSearchStatus: boolean;
@Output() getSearchStatusChange = new EventEmitter<boolean>();

如果您想将媒体资源所做的更改发布给父级，则需要通知家长：

this.getSearchStatusChange.emit(newValue)

在父级中，您需要对该属性使用盒中香蕉表示法：

[(getSearchStatus)]="myBoundProperty"

还可以绑定到属性，并在 child 属性更改时触发回调：

[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"

查看 PLNKR

Answer 2

另一种方法：使用 rxjs/BehaviorSubject 在不同组件之间传递状态。
这是 plunkr。
我用后缀"Rxx"命名主题，因此 searchStatus 的 BehaviorSubject 将是 searchStatusRxx。

1. 在父组件中初始化它，如searchStatusRxx = new BehaviorSubject(false);，
2. 使用 @Input 将其传递给子组件
3. 在子模板中，执行异步管道。
4. 在"父项"和"子项"中，searchStatusRxx.next(value)更改最新值。

Answer 3

稍微编辑了一下你的代码，它可以工作并且看起来更简单 imo。告诉我你是否喜欢它。

https://plnkr.co/edit/oJOjEZfAfx8iKZmzB3NY?p=preview

Answer 4

另一种方式。普伦克尔。我们想要的是单一的事实来源。这次我们可以把它放在孩子身上。

• 儿童初始化：#as
• 在父模板中，获取 child 的实例作为 #as.searchStatus 或任何名称。
• 使用 this.searchStatus 更改父项中的搜索状态，并在子项CC_12中更改搜索状态。