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();
}
}
决定自己的高度的是你的态度,而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2019-05-25 SVG新手入门