Получить значение от других компонентов / проблемы архитектуры? - PullRequest
Новая
       20

Получить значение от других компонентов / проблемы архитектуры?

0 голосов
/ 06 апреля 2020

Я совершенно новичок в Angular, начал его на прошлой неделе (но у меня есть небольшой базовый c опыт в программировании). Я пытаюсь создать очень простое c приложение для блога, и я хочу получить значение из root (app.component.ts) в теги моего компонента "app-post-list-item", находится в другом шаблоне моего компонента (post-list-component. html), так что я могу отобразить его в своем элементе списка сообщений. Я пробовал @Input () в разных местах, но текст просто не отображается. Может быть, я чего-то упускаю или неправильно понимаю, но это просто так пугает, и я не знаю, что и как делать сейчас. Я попытался переместить папку «post-list-item» в папку «post-list», но она тоже не работает. Итак, обратите внимание, что и «post-list», и «post-list-item» являются дочерними компонентами «app».

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

Это моя архитектура.

app.component. html: 

<div class="row">
  <div class="col-12">
    <app-post-list></app-post-list>
  </div>
</div>

app.component.ts: 

export class AppComponent {  
  title = 'blogApp';  
  pub1: string = "Ma première publi"; // this is what I want to display
}

post-list.component. html: 

<ul class="list-group">   
  <app-post-list-item [titrePubli]="pub1"></app-post-list-item> <!-- this is where I tell that I want to display -->
  <app-post-list-item></app-post-list-item>
  <app-post-list-item></app-post-list-item>
</ul>

post-list.component.ts: 

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})

export class PostListComponent implements OnInit {
  @Input() pub1: string; // note the @Input() here
  constructor() { }
  ngOnInit(): void {  }
}

post-list-item.component. html: 

<li class="list-group-item">
  <h3 style="font-size: 20px;">Titre : {{ getTitrePubli() }}</h3> <!-- this is where I want to display -->
  <h4 style="font-size: 18px;">Contenu : {{ getContenuPubli() }}</h4>
</li>

post-list-item.component.ts: 

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

@Component({
  selector: 'app-post-list-item',
  templateUrl: './post-list-item.component.html',
  styleUrls: ['./post-list-item.component.scss']
})

export class PostListItemComponent implements OnInit {
  @Input() titrePubli: string;
  contenuPubli: string = "C'est le bla bla bla";

  @Input() pub1: string;

  constructor() { } 

  ngOnInit(): void { }

  getTitrePubli() { return this.titrePubli; }
  getContenuPubli() { return this.contenuPubli; }
}

1 Ответ

1 голос
/ 06 апреля 2020

Прикрепленный скриншот - это не архитектура, а файловая структура проекта. И это не имеет никакого отношения к совместному использованию данных, поскольку файлы правильно указаны в модуле и других файлах, где они используются.

Источником путаницы здесь является схема именования. Давайте рассмотрим одну простую строку 

<app-post-list [pub1]="pub1"></app-post-list>
                 ˄       ˄
                 |       |
        @Input()         member
        variable         variable
        of post-list     of app-component

Как видите, [pub1] относится к входной переменной компонента post-list, а pub1 справа относится к значению переменной-члена ("Ma première publi "в вашем случае).

Хотя приведенный выше шаблон не является неправильным, если вы начинаете Angular, вам может пригодиться наличие некоторых очевидных шаблонов именования. Например, 

<app-post-list [pub1Input]="pub1Value"></app-post-list>

Теперь существует четкое различие между именами переменных, и это помогает лучше понять. Затем вы снова отправляете переменную из post-list в post-list-item компонент. Я изменил ваш код на следующий, и он работает как положено.

Компонент приложения 

export class AppComponent  {
  title = 'blogApp';  
  pub1Value: string = "Ma première publi";
}

<div class="row">
  <div class="col-12">
    <app-post-list [pub1Input]="pub1Value"></app-post-list>
  </div>
</div>

Компонент списка сообщений 

export class PostListComponent implements OnInit {
  @Input() pub1Input: string;

  titrePubliOne = 'title 1';
  titrePubliTwo = 'title 2';
  titrePubliThree = 'title 3';

  constructor() { }

  ngOnInit() { }
}

<ul class="list-group">   
  <app-post-list-item [titrePubli]="titrePubliOne" [pub1]="pub1Input"></app-post-list-item>
  <app-post-list-item [titrePubli]="titrePubliTwo" [pub1]="pub1Input"></app-post-list-item>
  <app-post-list-item [titrePubli]="titrePubliThree" [pub1]="pub1Input"></app-post-list-item>
</ul>

Элемент элемента списка сообщений 

export class PostListItemComponent implements OnInit {
  @Input() titrePubli: string;
  @Input() pub1: string;
  contenuPubli: string = "C'est le bla bla bla";

  constructor() { }

  ngOnInit() { }
}

<li class="list-group-item">
  <h3 style="font-size: 20px;">Titre : {{ titrePubli }}</h3>
  <h4 style="font-size: 18px;">Contenu : {{ pub1 }}</h4>
</li>

Рабочий пример: Stackblitz

...