Angular 2更改另一个组件上的组件变量

Question

组件如何更改另一个组件上的变量.例:

我有一个组件 app.component.ts

@Component({
    selector: 'my-app',
    template: `
    <nav *ngIf="onMain == false">
       Hello
    </nav>
    `
})

export class AppComponent{
  onMain: Boolean;

  constructor(){
      this.onMain = false;
    }
}

我有另一个组件,我想在我的应用程序组件中更改onMain main.component.ts

import {AppComponent} from '../app.component';

@Component({
    selector: 'main-app',
    template: ``
})

export class MainComponent{

  constructor() {
      this.appComponent = AppComponent;
      this.appComponent.onMain = true;
    }
}

我希望Hello会消失,但事实并非如此.如何让一个组件更改另一个组件的值？

Answer 1

首先,两个组件之间没有连接,或者代码中的某些内容可能不正确.如果您有父/子场景,则可以使用@Input,@Outputangular2.如果您没有父/子场景,则可以使用EventEmitter,SharedServiceangular2.

工作demo-EventEmitter方法

我考虑AppComponent过将parentComponent和MainComponent作为子组件.使用SharedService & EventEmitter概念angular2,我可以AppComponent's通过单击属于"MainComponent"视图的按钮隐藏部分视图.

AppComponent.ts

import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core';
import {MainComponent} from 'src/MainComponent';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'my-app',
    directives:[MainComponent],
    template: `<h1>AppComponent {{onMain}}</h1>
    <div *ngIf="onMain == false">
       Hello
      <br> __________________________________<br>
    </div>

  <main-app></main-app>
    `
})

export class AppComponent implements OnInit {
  onMain: Boolean;

  constructor(ss: SharedService) {
      this.onMain = false;
      this.ss = ss;
    }



    ngOnInit() {
    this.subscription = this.ss.getEmittedValue()
      .subscribe(item => this.onMain=item);
  }

}

MainComponent.ts

import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'main-app',

    template: `<h1> MainComponent</h1>
    <button (click)="changeName()">Change Name</button>
    `
})

export class MainComponent {



    constructor(ss: SharedService) {
      this.ss = ss;
    }

    changeName() {
      this.ss.change();
    }
}

shared.service.ts

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'


@Injectable()
export class SharedService {
  @Output() fire: EventEmitter<any> = new EventEmitter();

   constructor() {
     console.log('shared service started');
   }

   change() {
    console.log('change started'); 
     this.fire.emit(true);
   }

   getEmittedValue() {
     return this.fire;
   }

} 

Answer 2

如果组件之间没有关系(我的意思是父/子),则需要使用具有EventEmitter属性的共享服务.一个组件将基于它发出一个事件,这个其他组件将通过订阅来通知EventEmitter.收到事件时,此组件可以设置用于显示/隐藏按钮的属性...

• 共享服务

  @Injectable()
  export class SharedService {
    onMainEvent: EventEmitter = new EventEmitter();
  }
  

  不要忘记在boostrap函数中定义相应的提供程序,以便能够为整个应用程序共享相同的服务实例:`bootstrap(AppComponent,[SharedService]);

• AppComponent 零件

  @Component({ ... })
  export class AppComponent {
    onMain: boolean = false;
    constructor(service: MenuService) {
      sharedService.onMainEvent.subscribe(
        (onMain) => {
          this.onMain = onMain;
        }
     );
   }
  

  }

• MainComponent 零件:

  export class MainComponent {
    constructor(private service: SharedService) {
    }
  
    updateOnMain(onMain):void {
      this.service.onMainEvent.emit(onMain);
    }
  }
  

这些问题更多细节:

• 委托:Angular2中的EventEmitter或Observable
• 隐藏另一个视图angular2的按钮