ng-template的妙用
这个的主要是antd 表格的详情运用
{{item}} --{{i}}
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拿值
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
{{article.votes}}
{{article.link}}
{{article.title}}
细节修改
{{article[0].votes}}
{{article[0].link}}
{{article[0].title}}
{{article[1].votes}}
=======================
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();
}
这样添加组件也不错
Arrray
string
string[]
Array
number[]
ngSwitch
public list: string = 'c';
A
B
C
default
解除订阅
export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy {
public subscriptions: Subscription[] = [];
public everySecondOne: Observable = of(1);
public everySecondTwo: Observable = 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 = of(1);
public everySecondTwo: Observable = 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 = new Subject();
public everySecondOne: Observable = of(1);
public everySecondTwo: Observable = 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();
}
}