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的变量。现在，我想在ngAfterViewInit（）控制台的第二个组件中显示此sampleData。

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，所以我对角度的早期步骤感到困惑。

请帮助。

Answer 1

如果具有父子关系，则需要使用 Shared Service 来跨组件共享数据。 EventEmitters 。 / p>

使用共享服务的示例

使用服务保存类别。然后，您可以随时使用相同的服务来获取categoryType。

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

    sampleData: string;
    constructor() {

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

}

然后，您可以将此服务注入两个组件中，并从第一个组件中保存，例如，

this.appMsgService.saveSampleData(yourcategory);

然后在第二个组件中检索为

this.appMsgService.retrieveSampleData();

STACKBLITZ DEMO

Answer 2

如果first-component是第二个孩子的父母，您可以在

中传递值

second-component.html

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

如何读取在另一个组件中分配的变量？

2 个答案: