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

Posted

技术标签:

【中文标题】从其他组件/架构问题中获取价值?【英文标题】:Get value from other component / architecture issue? 【发布时间】:2020-07-18 11:20:03 【问题描述】:

我对 Angular 完全陌生,上周才开始使用它(但我有一点编程的基本背景)。我正在尝试构建一个非常基本的博客应用程序,并且我想从根(app.component.ts)获取一个值到我的组件标签“app-post-list-item”,位于我的其他组件中模板(post-list-component.html),以便我可以在我的帖子列表项中显示它。 我在各个地方都尝试过@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-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】:

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

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

<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

【讨论】:

谢谢,我的例子中的名字有点随意,但这确实帮助我确定了需要放在哪里。此外,我了解了一个属性值如何在结构中导航。但是,如果我要从 app.component.ts 中的数组中获取属性值,现在会怎样 - 假设:publications = [ titrePubli: "Ma première publi", contenuPubli: "Contenu 1" , titrePubli: "Ma seconde publi", contenuPubli: "Contenu 2" ]; ---,然后将其注入我的 post-list 组件中,以便它显示在我的 post-list-item 模板中? *ngFor 很难... 在这种情况下,您可以使用ng-container 循环数组。试试:&lt;ng-container *ngFor="let publication of publications"&gt;&lt;app-post-list-item [titrePubli]="publication.titrePubli" [pub1]="publication.contenuPubli"&gt;&lt;/app-post-list-item&gt;&lt;/ng-container&gt;

以上是关于从其他组件/架构问题中获取价值?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 Vue js 中另一个 Parent 的 Child 组件中获取价值?

RxJs 从 observable 中获取价值

如何从输入中获取价值?

React Native 从子组件中获取价值

在python中获取价值组件? [复制]

无法从函数中获取价值,即使我有一个非常相似的函数。 - 颤振