我有一个父组件(CategoryComponent),一个子组件(videoListComponent)和一个ApiService.
我有大部分工作正常,即每个组件可以访问json api并通过observable获取其相关数据.
目前视频列表组件只是获取所有视频,我想将其过滤为特定类别中的视频,我通过将categoryId传递给子项来实现此目的@Input().
CategoryComponent.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这有效,当父CategoryComponent类别更改时,categoryId值将通过via传递,@Input()但我需要在VideoListComponent中检测到这一点并通过APIService(使用新的categoryId)重新请求视频数组.
在AngularJS中,我会对$watch变量做一个.处理这个问题的最佳方法是什么？
我在ng-for循环中有一组单细胞组件.我已经掌握了一切,但我似乎无法找到合适的东西
目前我有一个
setTimeout(() => {
scrollToBottom();
});
但是这不会一直有效,因为图像会异步地向下推动视口.
什么是在angular2中滚动到聊天窗口底部的适当方法？
使用Angular 2和打字稿.我有一个数组,我使用DoCheck和IterableDiffer来监听我的代码中的更改.当数组被更改时,我收到通知,但是当数组中某个对象内的属性发生更改时,我不会收到通知.我尝试使用KeyValueDiffer,但它不起作用.我想也许我需要以不同方式使用"_differs.find".有任何想法吗？
@Component({
selector: 'test'
})
@View({
template: `
<div>hello!</div>`
})
export class MyComponent implements DoCheck {
private _differ: IterableDiffer;
private _differ2: KeyValueDiffer;
_myItems: MyItem[];
@Input()
set myItems(value: MyItem[]) {
this._myItems = value;
if (!this._differ && value) {
this._differ = this._iterableDiffers.find([]).create(null);
}
if (!this._differ2 && value) {
this._differ2 = this._differs.find(this._myItems).create(null);
}
}
get myItems() {
return this._myItems;
}
constructor(private _iterableDiffers: IterableDiffers, private _differs: KeyValueDiffers, private _myService: MyService) {
this.myItems = _myService.getItems();
}
ngDoCheck() {
var changes = this._differ.diff(this._myItems);
if (changes) …有没有办法检测 ng-content 的变化？
@Component({
selector: 'example',
template: `<ng-content></ng-content>`
})
export class Example {}
@Component({
selector: 'test',
template: `
<example>
<div *ngFor="let el of elements">{{el}}</div>
</example>`
})
export class Test {
elements = [1, 2, 3];
ngOnInit() {
setInterval(() => this.elements[0] += 10, 3000);
}
}
当我的 ng-content 发生变化时，我想在 Example 类中获取一些信息。
这里是plunker
我有一个父组件，它包含一个名为文档的属性。该属性是一个数组，用于将数组中的文档传递给子组件。
但是，当我将新文档推送到属性文档中时，子组件的视图没有改变。有人能告诉我我在这里做错了什么吗？
这是父组件中属性文档发生更改的位置：
// handle the data that comes back from the dialog
createDialog.afterClosed().subscribe(
data => {
if (data){
// persist vital signs
this.documentService.saveDocument(data.newDocument); // not implemented yet because it makes no sense with non functioning backend
this.documents.push(data.newDocument);
// update the existing document bucket the document belongs to
this.loincToDocumentsMap.get(data.loincCode)?.folderContent.push(data.newDocument);
}
}
);
这是我的子组件：
@Component({
selector: 'document-list',
templateUrl: './document-list.component.html',
styleUrls: ['./document-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DocumentListComponent implements OnInit, OnChanges {
@Input() documents: DocumentReference[] = [];
....
}
这就是我在父组件中使用子组件的地方：
<document-list *ngIf="showListUi" …