Angular 7 - 从父组件访问子组件的动态属性

Question

所以我最近才开始 Angular 开发，有些东西是我完全遗漏的。我有一个使用 app.component.html 设置的基本应用程序，如下所示：

<h1>{{ routeTitle }}</h1>
<router-outlet></router-outlet>

app.component.ts 设置为：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @Input() routeTitle;
}

然后我设置了 2 个其他基本组件，只是为了表明我的路由有效（它们确实如此），但是例如在 dashboard.component.ts 上，我似乎无法从中传递 routeTitle（作为子组件）返回到父组件（app.component）以显示在 H1 标签中：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  @Output() routeTitle;

  constructor() { }

  ngOnInit() {
    if (...somelogic...) {
      this.routeTitle = 'Dashboard';
    }
    else {
      this.routeTitle = 'Dashboard (Courier)';
    }
  }
}

请帮忙，因为这让我发疯，因为为什么我似乎无法理解一些不应该花这么长时间才能弄清楚的事情。谢谢！

Answer 1

"child"这个词用的地方太多了，可能有点混乱。

此代码：

<h1>{{ routeTitle }}</h1>
<router-outlet></router-outlet>

定义子路由

input 属性不适用于子路由。

要使用 input 属性，您需要将组件定义为子组件 component ...所以像这样：

<h1>{{ routeTitle }}</h1>
<my-child-component [myInputProperty]="myTitle"></my-child-component>

其中子组件定义如下：

@Component({
  selector: 'my-child-component',
  templateUrl: './myChild.component.html'
})
export class MyChildComponent {
  @Input() myInputProperty;
  // ...
}

我假设您真正想做的是在路由之间传递数据？如果是这样，您根本不想使用 input/output 属性。相反，您想使用众多技术中的一种在路由之间传递数据。

加上 Angular v7.2 他们刚刚添加了另一种技术：https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

Answer 2

有几个场景我们需要在组件之间传递数据：

如果你想将一些数据从 child 传递到 parent 那么你应该使用 @Output.
有时我们需要在兄弟组件之间传递数据，可以使用共享服务，利用Behavior subject来传递数据。

现在有了 Angular7.2，您可以使用 state feature。

您也可以查看以下 article。

Angular 7 - 从父组件访问子组件的动态属性

Angular 7 - Access dynamic property of child from parent component

pass-data

angular-routing

angular

Angular 7 - 从父组件访问子组件的动态 属性

Angular 7 - Access dynamic property of child from parent component

pass-data

angular-routing

angular

Angular 7 - 从父组件访问子组件的动态属性