angular - 从其他组件/架构问题中获取价值?
问题描述
我对 Angular 完全陌生,上周开始使用它(但我有一点编程的基本背景)。我正在尝试构建一个非常基本的博客应用程序,并且我想从根(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; }
}
解决方案
随附的屏幕截图不是架构,它是项目的文件结构。只要文件在模块和使用它们的其他文件中正确引用,它与数据共享无关。
这里混乱的根源是命名方案。让我们看一个简单的行
<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
推荐阅读
- debugging - 如何在 GDB 中设置断点,但不让断点暂停执行?如果线路被击中,我只想在控制台中收到通知
- excel - VBA中的自动过滤器
- bash - Bash 脚本 - AWS SSM 并行导出变量
- wagtail - 当我复制一个页面时,它的 ParentalManyToManyFields 不会被复制。难道我做错了什么?
- html - 请我试图将我的项目连接到数据库,但出现错误:当前上下文中不存在名称“文本框”
- python - 在类中设置python方法的属性
- c# - NHibernate QueryOver 删除重复项
- javascript - 用javascript中的键检索对象
- php - SQL 数据库是否返回类型,或者数据库抽象层是否执行隐式转换?(推进和php)
- c++ - 在官方 tensorflow resnet50 模型上运行 tflite 精度工具