Как я могу прочитать переменную, назначенную в другом компоненте?

Question

У меня есть два компонента, например.

@Component({
    selector: 'app-events',
    templateUrl: './events.component.html',
    styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
    sampleData : string ="some parent Data";

Из этого firstComponent у меня есть переменная с именем sampleData.Теперь я хочу показать этот sampleData во втором компоненте на консоли ngAfterViewInit ().

import { Component, AfterViewInit, Input } from '@angular/core';

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.css']
})
export class FooterComponent implements AfterViewInit {

    constructor() { }
    @Input() sampleData : string;

    ngAfterViewInit() {
        console.log(this.sampleData);
    }

}

Я прошел много урока, который передает данные из шаблона.Но я использую templateUrl вместо этого, поэтому я запутался на этом раннем шаге angular.

Любая помощь, пожалуйста.

Answer 1

, если первый компонент является родителем второго потомка, вы можете передать значение в

second-component.html

<second-component [sampleData]="sampleData"></first-child>

Answer 2

Вам необходимо использовать Shared Service для совместного использования данных между компонентами, если они имеют родительские и дочерние отношения, переходите к EventEmitters.

Примериспользование общей службы

Использование службы для сохранения категории.И затем вы можете использовать тот же сервис для получения categoryType, когда захотите.

import { Injectable } from '@angular/core';
@Injectable()
export class AppMessageQueuService {

    sampleData: string;
    constructor() {

    }
    saveSampleData((cat:any){
        this.sampleData= cat;
    }
    retrieveSampleData(){
        return this.sampleData;
    }

}

Затем вы можете внедрить этот сервис в оба компонента и сохранить его из первого компонента, например,

* 1015.*

затем получить во втором компоненте как

this.appMsgService.retrieveSampleData();

STACKBLITZ DEMO