gpt4 book ai didi

Angular4 @Input() 父组件传值给子组件

转载 作者:太空狗 更新时间:2023-10-29 17:36:50 25 4
gpt4 key购买 nike

我在 App component.html 中有这样一段代码。

 <form>
<input #box1 (blur)="onKey1(box1.value)" type="text" name="username">
<p>{{box1.value}}</p>
</form>

在 AppComponent.ts 中我有这样的代码。

import { Component } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
type:string;
constructor() { }
onKey1(value:string)
{
this.type=value;
}
}

现在我已经创建了一个名为 MyComponent3 的组件。在该组件中,我想从应用程序组件中检索数据。MyComponent3.html 的代码如下:

<p>{{type}}</p>

在 MyComponent3.ts 中我有以下代码。

import { Component, OnInit, ViewEncapsulation,Input } from '@angular/core';
@Component({
selector: 'app-my-component3',
templateUrl: './my-component3.component.html',
styleUrls: ['./my-component3.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MyComponent3Component implements OnInit {
@Input() type;
ngOnInit() {
}
}

但是在输出中,值没有从 AppComponent 传递到 My Component3。

最佳答案

无论您想传递给子组件的什么属性都应该在其中提及。您可以使用@input 和 html 传递给子组件,如下所示,

<app-my-component3 [type]="type"></app-my-component3>

关于Angular4 @Input() 父组件传值给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47349871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com