angular9的学习(十)
ng-template的妙用
这个的主要是antd 表格的详情运用
<ng-template ngFor let-item [ngForOf]="items" let-i="index">
{{item}} --{{i}}
</ng-template>
angular9的一种自动取消订阅
@UntilDestroy()
@Component(...)
export class MyComponent implements OnInit {
...
public ngOnInit() {
this.userService.getUser()
.pipe(untilDestroyed(this))
.subscribe();
}
// 不需要ngOnDestroy也可以 版本Angular 9+ !
}
github地址
https://github.com/ngneat/until-destroy
组件传值的细节
export class SelectComponent {
@Input() size: 'sm' | 'md' | 'lg' = 'md';
@Input() placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom'
}
默认的时候是'md' 'bottom'
订阅不同的值
订阅相同的值
let a=of(Math.random())
a.subscribe(res=>{
console.log(res);
})
a.subscribe(res=>{
console.log(res);
})
订阅不同的值
let b= defer(() => of(Math.random()));
b.subscribe(res=>{
console.log(res);
})
b.subscribe(res=>{
console.log(res);
})
input拿值
<input type="text" #newtitle> <br>
<input type="text" #newlink> <br>
<button (click)="add(newtitle,newlink)">点我</button>
add(a: HTMLInputElement, b: HTMLInputElement) {
console.log(a.value, b);
}
给组件本身添加class
:host.root123{
background-color: red;
}
@HostBinding('attr.class') cssClass = 'root123';
发现一种有趣的设计模式
article.model.ts
export class Article {
title: string;
link: string;
votes: number;
constructor(title: string, link: string, votes?: number) {
this.title = title;
this.link = link;
this.votes = votes || 0;
}
voteUp(): void {
this.votes += 1;
}
voteDown(): void {
this.votes -= 1;
}
}
组件
import {Component, HostBinding, OnInit} from '@angular/core';
import {Article} from './article.model';
@Component({
selector: 'app-one',
templateUrl: './one.component.html',
styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {
article: Article;
constructor() {
this.article = new Article('sss', 'bbb', 10);
}
add(): void {
this.article.voteUp();
}
plus(): void {
this.article.voteDown();
}
ngOnInit(): void {
}
}
html
<h1>{{article.votes}}</h1>
<h1>{{article.link}}</h1>
<h1>{{article.title}}</h1>
<button (click)="add()">++</button>
<button (click)="plus()">--</button>
细节修改
<h1>{{article[0].votes}}</h1>
<h1>{{article[0].link}}</h1>
<h1>{{article[0].title}}</h1>
<h1>{{article[1].votes}}</h1>
<button (click)="add()">++</button>
<button (click)="plus()">--</button>
=======================
article: Article[];
constructor() {
this.article = [
new Article('aaa', 'bbb', 10),
new Article('ccc', 'ddd', 13),
new Article('eee', 'fff', 13),
];
}
add(): void {
this.article[0].voteUp();
}
plus(): void {
this.article[0].voteDown();
this.article[0].voteDown();
}
这样添加组件也不错
<app-two *ngFor="let item of [1,2,3]" [one]="item"></app-two>
Arrray
string<Array>
string[]
Array<string>
number[]
ngSwitch
public list: string = 'c';
<div class="container" [ngSwitch]="list">
<div *ngSwitchCase="'a'">A</div>
<div *ngSwitchCase="'b'">B</div>
<div *ngSwitchCase="'c'">C</div>
<div *ngSwitchDefault>default</div>
</div>
解除订阅
export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy {
public subscriptions: Subscription[] = [];
public everySecondOne: Observable<number> = of(1);
public everySecondTwo: Observable<number> = of(2);
ngOnInit(): void {
this.subscriptions.push(this.everySecondOne.subscribe(res => {
console.log(res);
}));
this.subscriptions.push(this.everySecondTwo.subscribe(res => {
console.log(res);
}))
}
ngOnDestroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
}
不过还是建议使用下面的这种
export class ComponentOneComponent implements OnInit, OnDestroy {
public subscriptions: Subscription = new Subscription();
public everySecondOne: Observable<number> = of(1);
public everySecondTwo: Observable<number> = of(2);
ngOnInit(): void {
this.subscriptions.add(this.everySecondOne.subscribe(res => {
console.log(res);
}));
this.subscriptions.add(this.everySecondTwo.subscribe(res => {
console.log(res);
}))
}
ngOnDestroy() {
this.subscriptions.unsubscribe()
}
}
第三种方式
export class ComponentOneComponent implements OnInit, OnDestroy {
public subscriptions: Subject<boolean> = new Subject<boolean>();
public everySecondOne: Observable<number> = of(1);
public everySecondTwo: Observable<number> = of(2);
ngOnInit(): void {
this.everySecondOne.pipe(
takeUntil(this.subscriptions)
).subscribe(res => {
console.log(res);
});
this.everySecondTwo.pipe(
takeUntil(this.subscriptions)
).subscribe(res => {
console.log(res);
})
}
ngOnDestroy() {
this.subscriptions.next(true);
this.subscriptions.unsubscribe();
}
}
决定自己的高度的是你的态度,而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬