Góc 2 thay đổi các biến thành phần trên thành phần khác

Question

Làm thế nào một thành phần có thể thay đổi một biến trên thành phần khác. Ví dụ:

Tôi có một thành phần app.component.ts

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

export class AppComponent{ 
    onMain: Boolean; 

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

Tôi có một thành phần mà tôi muốn thay đổi onMain trong phần ứng dụng của tôi main.component.ts

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

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

export class MainComponent{ 

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

Tôi mong rằng Xin chào sẽ biến mất, nhưng nó không. Làm thế nào tôi có thể có một thành phần thay đổi giá trị trên một thành phần khác?

Answer 1

Trước hết, bạn không có kết nối giữa hai thành phần hoặc có thể có điều gì đó không đúng trong mã của bạn. Nếu bạn có kịch bản gốc/con, bạn có thể sử dụng @Input,@Output của angular2. Nếu bạn không có kịch bản gốc/con, bạn có thể đi với EventEmitter,SharedService của angular2.

Working demo-EventEmitter way

Tôi đã xem xét AppComponent là một parentComponent và MainComponent như một thành phần con. Sử dụng các khái niệm SharedService & EventEmitter của angular2, tôi có thể ẩn AppComponent's một phần của chế độ xem bằng cách nhấp vào nút thuộc về chế độ xem '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

Có bạn có thể thay đổi giá trị biến từ một thành phần với nhau cho điều này bạn phải inject lớp thành phần xuất khẩu vào các thành phần cha mẹ bằng cách làm như vậy bạn có thể tiếp cận và mỗi phương thức và biến đổi của lớp tiêm (thành phần).

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

làm việc Ví dụ http://plnkr.co/edit/fpYFueOnkm5sa4JfG7uX?p=preview

Answer 3

Nếu không có mối quan hệ giữa các thành phần (Ý tôi là cha/con), bạn cần phải sử dụng một dịch vụ chia sẻ với một tài sản EventEmitter. Một thành phần sẽ phát ra một sự kiện dựa trên nó và thành phần khác này sẽ được thông báo bằng cách đăng ký EventEmitter. Khi sự kiện được nhận, thành phần này có thể thiết lập một tài sản sử dụng để hiển thị/ẩn nút ...

• Shared dịch vụ

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

  Đừng quên để xác định nhà cung cấp tương ứng trong boostrap để có thể chia sẻ cùng một thể hiện của dịch vụ cho toàn bộ ứng dụng: `bootstrap (AppComponent, [SharedService]);

• AppComponent phần

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

  }

• MainComponent thành phần:

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

Những câu hỏi này để biết thêm chi tiết:

• Delegation: EventEmitter or Observable in Angular2
• hidding button of another view angular2

Answer 4

Nếu bạn có mối quan hệ cha/con, bạn có thể sử dụng trình phát sự kiện để lật biến chỉ bằng một vài dòng mã. Không cần viết toàn bộ dịch vụ được chia sẻ.

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