Question

下面是我在Angular应用程序中的组件结构，

app.component.html
units.component.html
section.component.html

{{appData.title}}

我正在app.component.ts中创建“ appData”，我想在子组件的第三级（即在app-section组件中）使用它。

我该如何实现？

Answer 1

在这种情况下，您可以使用共享服务在组件之间进行通信。

创建这样的共享服务。

@Injectable()
export class SharedDataService {

  public set appData(data: any) {
     this._appData = data;
  } 

  public get appData(): any {
     return this._appData;
  }
}

然后将SharedDataService注入到app.component中。并将appData设置为服务。

app.component.ts

constructor(private sharedDataService: SharedDataService) {

}

public setAppData(): void {
  this.sharedDataService.appData = this.appData;
}

然后将SharedDataService注入app-section.component，然后您就可以从服务中获取appData。

app-section.component.ts

constructor(private sharedDataService: SharedDataService) {

}

public getAppData(): void {
   this.appData = this.sharedDataService.appData;
}

然后，您可以像这样访问模板中的appData。

app-section.component.html

{{appData}}

有多种方式在角度组件之间进行通信。这就是组件交互。您可以在有角度的官方文档中阅读有关此内容的更多信息。 Component Interaction

Answer 2

使用Angular服务在各个组件之间共享公用数据。以下是执行此操作的步骤。

步骤1-创建角度服务

import { Injectable, } from '@angular/core';
@Injectable()
export class CommonService {
       sharedData:any; //property for get & set
}

步骤2-从父组件中，您可以将值设置为服务

import { Component, Input} from "@angular/core";
import { CommonService} from "path";

@Component({
    selector: "parent",
    templateUrl: "./ParentComponent.html",
    styleUrls: ["./style.css"],
    providers: [CommonService]
})
export class ParentComponent {

    constructor(
     private commonService: CommonService} 
    ) {

    }
    ngOnInit() {  
          this.commonService.sharedData= "Your Data"
    }

}

第3步-从子组件中访问值

import { Component, Input} from "@angular/core";
import { CommonService} from "path";

@Component({
    selector: "child",
    templateUrl: "./ChildComponent.html",
    styleUrls: ["./style.css"],
    providers: [CommonService]
})
export class ChildComponent {
    someProperty:any;
    constructor(
     private CommonService: CommonService} 
    ) {

    }
    ngOnInit() {  
        this.someProperty=  this.commonService.sharedData;
    }

}

请确保将服务注入到您的App模块中，因此您也可以在所有子模块中使用相同的代码。

@NgModule({
  declarations: [

  ],
  imports: [

  ],
  providers: [CommonService],
  bootstrap: [],

})
export class AppModule { }

如果您想使服务成为双向绑定，请通过此链接

Angular 2 Service Two-Way Data Binding

将数据传递到Angular 4中的第n级子组件

2 个答案: