从其他组件/架构问题中获取价值？

Question

我是 Angular 的新手，上周开始使用它（但我的编程基础知识很少）。我正在尝试构建一个非常基本的博客应用程序，我想从根 (app.component.ts) 获取一个值到我的组件标签 "app-post-list-item"，位于我的其他组件模板 (post-list-component.html)，这样我就可以在我的 post 列表项中显示它。我在不同的地方尝试过@Input()，但文本就是不显示。可能有一些我遗漏或误解的东西，但这一切太可怕了，我不知道现在该做什么或该怎么做。我试图将 "post-list-item" 文件夹移动到 "post-list" 文件夹中，但它也不起作用。因此，请注意 "post-list" 和 "post-list-item" 都是 "app".

的子组件

任何人都可以检查我的代码并告诉我如何让它工作吗？那将是真棒。谢谢！！

This is my architecture.

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-列表项。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-列表-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; }
}

Answer 1

附上的截图不是架构，是项目的文件结构。与数据共享无关，只要在模块中正确引用文件和使用它们的其他文件即可。

这里混乱的根源是命名方案。让我们看一个简单的行

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

Post 列表组件

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>

Post 列表项组件

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

从其他组件/架构问题中获取价值？

Get value from other component / architecture issue?

components

input

typescript

display

angular