Angular2 @Input 和 @Input 用法

一时失言乱红尘 2022-07-14 13:54 194阅读 0赞

**@Input**

@Input是用来定义模块的输入的，用来让父模块往子模块传递内容：

@Component({ selector: 'bank-account', template: ` Bank Name: { {bankName}} Account Id: { {id}} ` }) class BankAccount { 
      @Input() bankName: string;
      @Input('account-id') id: string;
      // this property is not bound, and won't be automatically updated by Angular
      normalizedBankName: string;
    }
    @Component({ selector: 'app', template: ` < bank-account bank-name="RBC" account-id="4747">< bank-account> `, directives: [BankAccount] }) class App { }

在这个例子中，父模块是app，子模块是BankAccount， 在app中我们想往子模块里面传递back-name和account-id这两个信息，可以通过property的方式最简单直接，而子模块要接受这个 property就要用@Input来接收。子模块会在BankAccount里面直接接收传递过来的property。传递的方式可以是驼峰法，也可以直接写在input里面，就如  
例子里面写的那样。要记住一点的是父模块在引用子模块的时候是用的\[\]。

**@Output**

子模块想自定义一些event传递给父模块又该怎么做呢？这时候就要用到@Output了。

@Directive({
      selector: 'interval-dir',
    })
    class IntervalDir { 
      @Output() everySecond = new EventEmitter();
      @Output('everyFiveSeconds') five5Secs = new EventEmitter();
      constructor() {
        setInterval(() => this.everySecond.emit("event"), 1000); setInterval(() => this.five5Secs.emit("event"), 5000); } } @Component({ selector: 'app', template: ` < interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()"> < /interval-dir> `, directives: [IntervalDir] }) class App { everySecond() { console.log('second'); } everyFiveSeconds() { console.log('five seconds'); } }

因为在普通的html里面，比如button我们会有onclick这种event来监听这个button是否被按了，然后angular2也完全允许我们自定义这种event listening的模式，我们可以给任何模块定义这种event，当触发了event之后就会从子模块往父模块传递子模块的信息。

再这个例子里，父模块是app，子模块是IntervalDir， 然后在子模块定义event触发的条件，比如每隔1s要触发事件，每隔5s要触发事件。然后当父模块监听到这些事件时可以做相应的操作。当然我们如果想传递信息，可以在new EventEmitter()里面加入我们想要传递的东西，然后在使用的时候加入函数的参数里面。比如我们想传递一个  
test，我们只需要这么改：

class IntervalDir \{  
@Output() everySecond = new EventEmitter(test);  
\}  
< interval-dir (every-second)=”everySecond(test)” (every-five-seconds)=”everyFiveSeconds()”>  
everySecond(test) \{ console.log(test); \}

而在这里，父模块在引用子模块的时候是用的()。

**\[(ngModel)\]**

最后当然是最经典的angular特有的ngModel双向binding了。而这个特性是< input >特有的。我们注意到了 \[(ngModel)\] 既有\[\]也有()。没错它既有Input的特性也有Output的特性。

< input [(ngModel)]="hero.name" placeholder="name" >

**directives**

主要是加入子模块的模块，当我们定义了一个模块之后，如果我们想要它被别的模块使用，必须定义一个出口被别的模块使用，比如app.component这个模块最后就要：

export class AppComponent {}

让angular2知道它是一个AppComponent模块，然后在boot里面可以加入这个模块。同理我也export了HeroComponent，HeroFormComponent以及HeroesListComponent模块。然后在app.component的一开始就import进来，然后就要在directive加入这些模块然后在template才能识别相应的selector。如果  
不在directive中引入相应的模块，那在compile的时候template就不知道相应的selector是啥就不能正常的render了。

**providers**

这个主要用来加入service的模块。当我们想在模块之中使用service的时候，和directive相同的道理，我们需要加入provider这样这个模块就知道使用的service的provider。小G在用angular的过程中碰到最多的问题就是missing provider的问题，在angular1中可能是由于service的dependency之间有loop，  
表示service互相依赖，会有问题。但angular2由于模块化了这个dependency injection的问题得到了很好的解决。如果再碰到这类问题首先要检查模块是否加入了service provider。

**styles**

这个主要定义这个模块使用的css，不用放到外部的style.css里面。这样这个模块的css完全由自己掌控，是不是方便了很多？

< li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> < span class="badge">{ { hero.id}}< /span> { { hero.name}} < /li >

在html里面用ngFor来循环这个list然后把list里面的英雄输出到html里面。在这里的语法和angular1完全不一样了。在angular1里面，完全没有以及\#的符号，但是在angular2里面，和\#确实很关键的语法。  
( )这个在ngFor的前缀表示整个< li >元素以及它的子元素合成一个master模板。如果不想使用( ),ngFor需要被包含在一个template的元素里面：

< template ngFor #hero [ngForOf]="heroes" > < hero-detail [hero]="hero" >< /hero-detail > < /template >

Angular2还有这个语法的就是ngIf。如果不用()也需要把ngIf包含在template里面。