从Angular 2中的子组件更新父组件属性
发布时间:2020-12-17 08:01:37 所属栏目:安全 来源:网络整理
导读:我正在使用@input从父组件接收属性,以激活子组件元素之一中的CSS类. 我能够从父母那里收到房产并激活班级.但这只能工作一次.我从父级接收的属性是一个类型的布尔数据,当我从子组件将其状态设置为false时,它在父级中不会更改. 普兰克:https://plnkr.co/edit/
我正在使用@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()是一种数据绑定方式. @Input() getSearchStatus: boolean; @Output() getSearchStatusChange = new EventEmitter<boolean>(); 如果要将对属性所做的更改发布到父级,则需要通过以下方式通知父级: this.getSearchStatusChange.emit(newValue) 在父级中,您需要为该属性使用banana-in-a-box表示法: [(getSearchStatus)]="myBoundProperty" 你也可以绑定到属性并在子进程发生变化时触发回调: [getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)" 见plnkr (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |