发表于: 2017-06-09 22:27:47

1 1193


今天完成的事情:


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


返回列表 返回列表
评论

    分享到