我如何在角度2的2个分量之间共享变量值

Question

I am playing around with angular2. I have created 1 component using angular cli called appmenu.

appmenu.html as follows:

<ul>
  <li (click)="menuitem1()">Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>

i wish to fetch the value of testvariable on app.component.html, but i dont know what should i do in my app.component.ts

appmenu.ts as follows

   import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';

@Component({
  providers: [AppMenuService], // GIVING ERROR HERE
  selector: 'app-appmenu',
  templateUrl: './appmenu.component.html',
  styleUrls: ['./appmenu.component.css']
})
export class AppmenuComponent implements OnInit {
public testvariable = "1st";
public data: any;
 // constructor(private sharedData: AppMenuService) { }

  ngOnInit() {
   // this.data = this.sharedData.data;
   // console.log(this.data);
  }

  menuitem1(){
    console.log("Menu item 1 clicked");
  }

}

appmenu.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class AppMenuService{
public data: any;
    constructor() {
        this.data = 'Lorem ipsum dolor sit.';
    }
}

Getting error on appmenu.component.ts here -> providers: [AppMenuService] , it says cannot find name AppMenuService

Answer 1

You can use the @ViewChild annotation for this in your parent component:

@ViewChild(AppmenuComponent) appComponent: AppmenuComponent;

https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

If you want to statically share a variable between two components you can declare this variable in some service and use this variable by injecting this service. Eg

// shared-data.service.ts

export class SharedDataService {
    public data: any;
    constructor() {
        this.data = 'Lorem ipsum dolor sit.';
    }
}

// app.component.ts

@Component({ ... })
export class AppComponent implements OnInit {
    public data: any;

    constructor(private sharedData: SharedDataService) { }

    public ngOnInit() {
        this.data = this.sharedData.data;
    }
}

// app-menu/app-menu.component.ts

@Component({ ... })
export class AppMenuComponent implements OnInit {
    public data: any;

    constructor(private sharedData: SharedDataService) { }

    public ngOnInit() {
        this.data = this.sharedData.data;
    }
}

But commonly when you need to shared some data between parent and child components you need to use @Input and @Output . @Input allows you to pass data directly to the child component/directive. @Output allows you to listen events of child component. Learn more here .

Eg

// app.component.ts

@Component({
    template: `
        <app-menu
            [someData]="dataForChild"
            (menuClick)="handleMenuClick($event)">
        </app-menu>
    `
})
export class AppComponent implements OnInit {
    public dataForChild: any;

    constructor() { }

    public ngOnInit() {
        this.dataForChild = 'Lorem ipsum dolor sit.'
    }

    public handleMenuClick(itemIndex) {
        console.log(itemIndex);
    }
}

// app-menu/app-menu.component.ts

@Component({
    selector: 'app-menu',
    template: `
        <ul>
            <li (click)="transferMenuClick(1)">Menu item 1</li>
            <li (click)="transferMenuClick(2)">Menu item 2</li>
            <li (click)="transferMenuClick(3)">Menu item 3</li>
        </ul>
    `
})
export class AppMenuComponent implements OnInit {
    @Output('menuClick')
    public menuClick: EventEmitter<number>;

    @Input('someData')
    public someData: any;

    constructor(private sharedData: SharedDataService) {
        this.menuClick = new EventEmitter<number>;
    }

    public ngOnInit() {
        console.log(this.someData);
    }

    public transferMenuClick(itemIndex) {
        this.menuClick.emit(itemIndex);
    }
}