今天完成的事情：
1.通过输入型绑定把数据从父组件传到子组件。
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
父组件HeroParentComponent把子组件的HeroChildComponent放到*ngFor循环器中，把自己的master字符串属性绑定到子组件的master别名上，并把每个循环的hero实例绑定到子组件的hero属性。
import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master: string = 'Master';
}
2.父组件类调用子组件方法
本地变量
若只需要在父组件的模板中调用子组件方法，可以给子组件添加一个本地变量名，在模板中使用该名称调用。
<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
<button (click)="header.toggle()">调用子组件</button>
ViewChild和ViewChildren
只能在父组件的模板中调用，而不能在父组件类中访问子组件，有些局限。如果需要在父组件类中访问或调用子组件方法，需要使用ViewChild、ViewChildren将子组件注入到父组件中。
<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
<app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
<button (click)="header.toggle()">本地变量调用子组件</button>
<button (click)="headerToggle()">ViewChild调用子组件</button>
明天计划的事情：
继续学习
问题：
在chrome中登录的input会有弹框，弹框中用户名和密码也被默认填写进去了，如何不让记录账户密码：
1.在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"
<form method="post" action="" name="login" autocomplete="off">
</form>
//或者
<input id="name" type="text" name="name" maxlength="20" autocomplete="off">
2.表单中有input[type="password"]，点击保存密码后，在Chrome浏览器则自动填充了用户名和密码的输入框则需要单独处理
修改readonly属性
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
收获：
angular 的子组件没有body
返回列表
评论