Question

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

我能够从父母那里收到财产并激活班级。但这只能工作一次。我从父接收的属性是一个类型的布尔数据，当我从子组件将其状态设置为false时，它在父级中不会改变。

Plunkr：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）。

Answer 1

您需要使用双向数据绑定。

@Input()是一种数据绑定方式。要启用双向数据绑定，您需要添加与该属性相对应的@Output()，并使用＆＃34;更改＆＃34;后缀

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

如果要将对您的财产所做的更改发布到父级，则需要通过以下方式通知父级：

this.getSearchStatusChange.emit(newValue)

并且在父级中，您需要为该属性使用banana-in-a-box表示法：

[(getSearchStatus)]="myBoundProperty"

你也可以绑定到属性并在子节点发生变化时触发回调：

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

请参阅plnkr

Answer 2

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

在父组件中初始化它，如searchStatusRxx = new BehaviorSubject(false);，
使用@Input
在子模板中，您执行异步管道。
中，您可以searchStatusRxx.next(value)更改最新值。

Answer 3

编辑你的代码，它的工作原理和看起来更简单的imo。如果你喜欢，请告诉我。

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

Answer 4

又一种方式。 Plunkr。我们想要的是一个单一的事实来源。这次我们可以把它放在孩子身上。

初级儿童：searchStatus = false
在父模板中，将子实例设为#as或其他任何名称。
使用#as.searchStatus和子this.searchStatus更改父级中的searchStatus。

从Angular 2

4 个答案: