Question

我的angular 5项目中有一个自定义模块。自定义模块名称： - 餐厅

此自定义模块有5个组件。它们是： - a。横幅b。菜单c。推荐d。篮子e.Restaurantlayout

Restaurantlayout拥有所有这四个（横幅，菜单，推荐，篮子）组件，在餐厅模块路线中我正在加载Restaurantlayout。

直到这一点工作正常。

我希望在加载此模块时，变量将通过调用服务获得一些数据，并且每个组件都可以使用该数据。我已经尝试过做@input（）但是它不能在自定义模块中工作，但对于app模块非常有用。

我怎样才能做到这一点？提前谢谢。

Answer 1

方法1：

组件到组件数据传递

如果您使用的是 @Input（），则表示您正在将数据从组件传递到另一个组件。所以要做到这一点，你必须绑定C1的C2输入。

父组件：

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

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

  outPutData: any;
  constructor() { }

  ngOnInit() {
  }

}

父组件parent.html

<app-child [inputData]="outPutData"></app-child>

您已完成从父组件传递数据，现在是时候进入子组件。这样做找到下面的例子。

子组件：

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

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

  @Input("inputData") inputData: any;
  constructor() { }

  ngOnInit() {
    console.log(this.inputData);
  }

}

方法2：

数据总线（公共服务）

To implement this please follow this link

为角度为4的自定义模块内的每个组件提供变量

1 个答案: