angular之Input和Output

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular之Input和Output相关的知识,希望对你有一定的参考价值。

参考技术A 一个装饰器,用来把某个字段标记为输入属性,该输入属性会绑定到模板中的某个DOM属性。当变更检测的时候,angular会自动使用这个DOM属性的值来更新此数据属性。
1:格式

2:使用

上述id就是起的child-id的别名,在子组件中就会使用id代替child-id。
同时我们还可以把Input和set/get结合起来使用,拿到title值之后做一些操作。

一个装饰器,用于把一个类字段标记为输出属性。借助 EventEmitter 来进行子组件往父组件传递内容。
在子组件中创建一个EventEmitter的实例作为输出属性,在父组件中通过事件绑定的方法监听,当子组件调用输出属性.emit(把吧啦吧啦)的时候,父组件就会接受到该消息。

如何连接 Output() 和 Input() 装饰器?

【中文标题】如何连接 Output() 和 Input() 装饰器?【英文标题】:How to interface Output() and Input() decorators? 【发布时间】:2018-02-14 07:15:37 【问题描述】:

我想为生成 JSON 的组件创建一个接口。我想强制每个实现组件接受一个类型作为输入并产生一个输出:

import  EventEmitter, Output, Input  from '@angular/core';
import  Foo, FooConfiguration  from '../../interfaces';
interface FooConfigurator 
    @Output() fooWasConfigured: EventEmitter<FooConfiguration>;
    @Input() fooInstance: Foo;

然后,实现 FooConfigurator 的组件将确保:

import  EventEmitter, Output, Input  from '@angular/core';
import  Foo, FooConfiguration, FooConfigurator  from '../../interfaces';
class ConcreteFooConfigurator implements FooConfigurator 
    @Output() fooWasConfigured: EventEmitter<FooConfiguration>;
    @Input() fooInstance: Foo; 

此接口定义失败,因为它的语法无效。我该怎么做,或者更好地解决问题?

【问题讨论】:

【参考方案1】:

目前不可能将装饰器与 TypeScript 接口。下一个最好的方法是简单地连接类型并添加有关它的 cmets。

interface FooConfigurator 
    fooWasConfigured: EventEmitter<FooConfiguration>;
    fooInstance: Foo;

这在本质上几乎涵盖了需求,EventEmitter 将可靠地看起来应该发出一个事件,并且在 fooInstance 中指示类具有这样的属性。 如何然而这些应该在 cmets 领域中使用。

【讨论】:

以上是关于angular之Input和Output的主要内容,如果未能解决你的问题,请参考以下文章

Angular 4 中的装饰器语法 @Input('someValue') 和 @Input() 有啥区别?

Ionic 3 和 Angular 2 中的多个 @Input

处理 Angular 2 中动态创建的组件的 @Input 和 @Output

在 Angular 组件中与 @Input 和 @Output 共享数据

如何将可观察值传递给@Input() Angular 4

Angular 将 @Input 用于深度嵌套的组件