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;
}

然后我设置了两个其他基本组件，只是为了证明我的路由有效（确实如此），但是例如在dashboard.component.ts上，我似乎无法从中传递routeTitle（子组件）备份到父组件（应用组件）以显示在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

“子”一词在很多地方都使用过，可能会造成混淆。

此代码：

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

定义孩子的路线

input属性不适用于子路由。

要使用input属性，您需要将组件定义为子组件 ... ...如下所示：

<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

在几种情况下，我们需要在组件之间传递数据：

1. 如果要将某些数据从子级传递给父级，则应使用@Output。

2. 有时我们需要在同级组件之间传递数据，在那里我们可以使用共享服务并利用Behavior行为来传递数据。

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

您也可以关注以下article。