在Angular 2中从子组件更新父组件属性 [英] Update parent component property from child component in Angular 2

问题描述

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

I'm using @input to receive a property from parent component in order to activate a CSS class in one of child component's element.

我可以从父级那里接收该属性，也可以激活该类.但这仅工作一次.我从父级收到的属性是一个布尔数据类型，当我从子级组件将其状态设置为false时，它在父级中不会更改.

I'm able to receive the property from parent and also activate the class. But this works only once. The property i'm receiving from parent is a boolean data typed and when I set the status of it to false from child component, it does not change in parent.

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

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() {

  }
}

请检查以上给定的拨栓.开放式搜索功能仅工作一次.关闭搜索后，它不会再次触发.

Please check the above given plunker. The open search function works only once. After closing the search, it does not trigger again.

在这种情况下@input是正确的用例吗?请帮我解决这个问题. (请更新活塞).

Is @input is the proper use case for this scenario? Please help me fix this. (Please update the plunker).

推荐答案

您需要使用2种方式进行数据绑定.

You need to use 2 way data-binding.

@Input()是数据绑定的一种方式. 要启用2种方式的数据绑定，您需要添加与属性相对应的@Output()，后缀为更改"

@Input() is one way data-binding. to enable 2 way data-binding you need to add an @Output() corresponding to the property, with a "Change" suffix

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

当您要将对属性所做的更改发布给父级时，您需要通过以下方式通知父级:

when you want to publish the change made to your property to the parent, you need to notify the parent with:

this.getSearchStatusChange.emit(newValue)

，并且在父级中，您需要对该属性使用即插即用"符号:

and in the parent you need to use the banana-in-a-box notation for that property:

[(getSearchStatus)]="myBoundProperty"

您还可以绑定到该属性，并在子项中的属性更改时触发回调:

you can also bind to the property and trigger a callback when it changes in child:

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

请参见 plnkr

这篇关于在Angular 2中从子组件更新父组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！