首页 文章

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

提问于
浏览
37

我正在使用 @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 回答

  • 2

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

    • 初始儿童: searchStatus = false

    • 在父模板中,将child的实例作为 #as 或任何名称 .

    • 使用 #as.searchStatus 和子 this.searchStatus 更改父级中的searchStatus .

  • 1

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

    • 在父组件中初始化它,如 searchStatusRxx = new BehaviorSubject(false);

    • 使用@Input将其传递给子组件
      在子模板中

    • ,你做异步管道 .
      在父级和子级中

    • ,您执行 searchStatusRxx.next(value) 以更改最新值 .

  • 71

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

    @Input() 是单向数据绑定 . 要启用2路数据绑定,您需要添加对应于该属性的 @Output() ,后缀为"Change"

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

    如果要将对属性所做的更改发布到父级,则需要通过以下方式通知父级:

    this.getSearchStatusChange.emit(newValue)
    

    在父级中,您需要为该属性使用banana-in-a-box表示法:

    [(getSearchStatus)]="myBoundProperty"
    

    你也可以绑定到属性并在子进程发生变化时触发回调:

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

    plnkr

  • 1

    编辑你的代码一点点,它的工作原理和简单的imo . 告诉我你是否喜欢它 .

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

相关问题