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

前端之家收集整理的这篇文章主要介绍了从Angular 2中的子组件更新父组件属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用@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).

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

@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)"

plnkr

原文链接:https://www.f2er.com/angularjs/143885.html

猜你在找的Angularjs相关文章