Angular 7 - доступ к динамическому свойству потомка из родительского компонента - PullRequest
Новая
       60

Angular 7 - доступ к динамическому свойству потомка из родительского компонента

0 голосов
/ 22 января 2019

Так что я совсем недавно начал с разработки 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)';
    }
  }
}

Пожалуйста, помогите, потому что это сводит меня с ума, потому что я не могу разобраться с чем-то, что не нужно так долго, чтобы понять. Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Существует пара сценариев, в которых нам нужно передавать данные между компонентами:

  1. Если вы хотите передать некоторые данные от дочернего к родительскому, то вам следует использовать @ Output.

  2. Иногда нам нужно передавать данные между одноуровневыми компонентами, там мы можем использовать общие сервисы и использовать преимущества поведения при передаче данных.

    Теперь с Angular7.2 вы можете использовать функцию состояния .

Вы также можете посмотреть следующую статью .

0 голосов
/ 22 января 2019

Слово "ребенок" используется слишком много мест и может быть немного запутанным.

Этот код: 

<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.Скорее, вы хотите использовать один из многих методов для передачи данных между маршрутами.

enter image description here

Плюс с Angular v7.2 они просто добавили другой метод:https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

...