组件
声明一个组件
import { Component } from '@angular/core'
@Component({
selector:'<app-component></app-component>',
template:'<h2>我是一个组件<h2>'
})
export class MyComponent{
}
定义完组件需要在app.module declarations引入
@NgModule({
declarations: [ MyComponent],
...
})
cli创建组件
利用命令创建的组件会自动更新app.module声明组件
ng g c simple-form --inline-template --inline-style
ng g c simple-form -it -is # 新建组件，该组件使用内联模板和内联样式
指令
指令可以改变组件的样式,结构
import { Directive,HostBinding, Input, HostListener, Attribute} from '@angular/core';
@Directive({
selector:'[greet]'
})
export class GreetDirective{
@Input() greet: string;
//与元素属性绑定
@HostBinding() get innerText() {
return this.greet;
}
//绑定事件
@HostListener('click',['$event']) onclick($event){
console.log('click....');
}
//获取属性的值
constructor(@Attribute('author') public author:string){
console.log('author',author);
}
}
ng-template 在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图。
@Component({
selector: 'app-root',
template: `
<ng-template #tpl>
Hello, Semlinker!
</ng-template>
`,
})
export class AppComponent implements AfterViewInit{
@ViewChild('tpl') tplRef: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
this.vcRef.createEmbeddedView(this.tplRef);
}
}
结构指令
@Directive({
selector: '[show]'
})
export class UnlessDirective {
@Input('show')
set condition(newCondition: boolean) {
if (!newCondition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
constructor(
private viewContainer: ViewContainerRef,
private templateRef: TemplateRef<any>,
) {
}
}
//使用
<div *show='false'></div>
管道
管道作用是对数据进行过滤处理，比如转换大小写日期格式化等等
内建管道及分类
- String -> String
- UpperCasePipe
- LowerCasePipe
- TitleCasePipe
- Number -> String
- DecimalPipe
- PercentPipe
- CurrencyPipe
- Object -> String
- JsonPipe
- DatePipe
- Tools
- KeyValuePipe（v6.1.0）
- SlicePipe
- AsyncPipe
- I18nPluralPipe
- I18nSelectPipe
管道可以接收多个值用:隔开
{{'abcd' | slice:0:3}} //'abc'
自定义管道
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name:"strRepeatPipe"
})
export class StrRepeatPipe implements PipeTransform{
transform(str:string,num:number):string{
return str.repeat(num)
}
}
Output(子组件向父组件传值)
@Output() change = new EventEmitter<{name:string}>();
change.emit({name:''})
Input(父组件向子组件传参)
<clicd-component [value]='value'></clicd-component>
子组件
@Input() value:string;
组件样式
<div [ngClass]="{'userClass':true}"></div>
<div [ngClass]="['blue', 'round']"></div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"></div>
<div [style.background-color]="'yellow'"></div>
