У меня есть строковый параметр в дочернем компоненте, который мне нужно показать в родительском компоненте. Это должно быть сделано, когда страница загружается. Таким образом, не по клику или любому другому событию.

Как вам удается это сделать?

До сих пор я не нашел ответа, который подходил бы для моего решения.

0
private7 14 Фев 2020 в 17:54

2 ответа

Лучший ответ

Таким образом, исключая связь через события, у вас есть следующие варианты:

  1. Общайтесь через общий сервис. Это обычная стратегия, пример не требуется.

  2. Передайте объект от родителя ребенку. Если дочерний элемент обновляет свойство для ссылки на объект, родительский элемент также увидит это обновленное значение (хотя и без уведомлений).

Демонстрация: https://stackblitz.com/edit/angular-h7h5xl

Принцип:

Родитель создает объект и передает его ребенку

< Сильный > parent.ts

obj = { value: ''; };

< Сильный > parent.html

<child [obj]="obj"></child>

Ребенок получает объект и обновляет свойство на нем.

< Сильный > child.ts

@Input() obj: { value: string };

someMethod(): void {
  // update obj, which both parent and child reference
  this.obj.value = 'CHILD';
}

Конечный результат: всякий раз, когда родитель читает из свойства, он увидит значение, которое установил потомок.

Редактировать:

Как указывает Майкл Д., я решил передать объект через строку, а не строку, потому что ссылки объекта передаются скорее, чем буквальные значения.

0
Kurt Hamilton 14 Фев 2020 в 15:23

Вы можете использовать ViewChild для доступа к дочерним данным в родительском компоненте.

Демонстрация: Stackblitz

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
  secretString: string = "Hi there!";
}

Дочерний компонент:

Поместите ваш дочерний компонент в родительский и пометьте его:

<hello #cmp></hello>

Используйте ViewChild для доступа к данным внутри вашего компонента

@ViewChild('cmp', {static: true}) hi;
<p>
  This is comming from your child: {{hi.secretString}}
</p>
0
YounesM 14 Фев 2020 в 15:15