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

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

我有一个组件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会消失,但事实并非如此.如何让一个组件更改另一个组件的值？

首先,两个组件之间没有连接,或者代码中的某些内容可能不正确.如果您有父/子场景,可以使用@ Input,@ Output of angular2.如果您没有父/子场景,可以使用RoleE的SharedEmitter,SharedService. Working demo-EventEmitter way
我认为AppComponent是一个parentComponent,MainComponent是一个子组件.使用SharedService&有关angular2的EventEmitter概念,我可以通过单击属于“MainComponent”视图的按钮来隐藏AppComponent的视图部分.

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

}

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

猜你在找的Angularjs相关文章