Question

组件如何更改另一个组件上的变量。例如：

我有一个组件app.component.ts

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

export class AppComponent{
  onMain: Boolean;

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

我想在我的应用程序组件main.component.ts

中更改onMain的另一个组件

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

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

export class MainComponent{

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

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

Answer 1

首先，两个组件之间没有连接，或者代码中的某些内容可能不正确。如果您有父/子场景，则可以使用angular2的@Input,@Output。如果您没有父/子情景，则可以使用{2}的angular2。

Working demo-EventEmitter way

我认为EventEmitter,SharedService是一个parentComponent，而MainComponent是一个子组件。使用AppComponent的{{1}}概念，我可以通过点击属于＆＃39; MainComponent＆＃39;的按钮来隐藏SharedService & EventEmitter部分视图。图。

<强> AppComponent.ts

angular2

<强> MainComponent.ts

AppComponent's

<强> shared.service.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);
  }

}

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);
  }
}

这些问题有关详细信息：

Answer 3

是的，您可以将变量值从一个组件更改为另一个组件 inject组件通过这样做将组导出到父组件中您可以访问注入类（组件）的每个方法和变量。

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: `myTemplate.html`,
    directive: [AppComponent2]
})

export class AppComponent {
  variable1: boolean = true;
}

@Component({
    selector: 'my-app2',
    templateUrl: `temp2.html`,
    providers: [AppComponent]
})

export class AppComponent2 {
  constructor(private appComponent: AppComponent){ }
  Fun(){
    console.log('Function Called');
    this.appComponent.variable1 = false;
  }
}


<button (click)='Fun()'>Change Variable</button>

{{appComponent.variable1}}

根据ng6更新 -

从@ angular / core＆＃39;;

工作示例http://plnkr.co/edit/fpYFueOnkm5sa4JfG7uX?p=preview

Answer 4

如果您有父/子关系，您可以使用事件发射器仅使用几行代码来翻转变量。无需编写完整的共享服务。

<强> app.component.ts

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

<强> main.component.ts

import {AppComponent} from '../app.component';
import { Output, EventEmitter } from '@angular/core';

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

export class MainComponent{
    @Output() observableEvent: EventEmitter<any> = new EventEmitter<any>();

  constructor() {
      this.appComponent = AppComponent;
      this.observableEvent.emit();
    }
}

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

4 个答案: