我正在努力学习Angular 2.
我想使用@ViewChild Annotation 从父组件访问子组件.
这里有一些代码行:
在BodyContent.ts我有:
import {ViewChild, Component, Injectable} from 'angular2/core';
import {FilterTiles} from '../Components/FilterTiles/FilterTiles';
@Component({
selector: 'ico-body-content'
, templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html'
, directives: [FilterTiles]
})
export class BodyContent {
@ViewChild(FilterTiles) ft:FilterTiles;
public onClickSidebar(clickedElement: string) {
console.log(this.ft);
var startingFilter = {
title: 'cognomi',
values: [
'griffin'
, 'simpson'
]}
this.ft.tiles.push(startingFilter);
}
}
而在FilterTiles.ts中:
import {Component} from 'angular2/core';
@Component({
selector: 'ico-filter-tiles'
,templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
})
export class FilterTiles {
public tiles = [];
public constructor(){};
} …如何自动对焦输入元素？与此问题类似,但与AngularDart不同.像这样的东西:
<input type="text" [(ngModel)]="title" [focus] />
//or
<input type="text" [(ngModel)]="title" autofocus />
Angular2是否支持此功能？
最近的问题是这个问题,但是有没有更简单/更简单的解决方案,因为我没有"输入框列表".在提供的链接*ngFor="#input of inputs"中使用,但我在控件模板中只有1个输入.
我想使用访问组件的DOM ViewChild.但是当我试图访问该nativeElement物业时,它就是undefined.
以下是片段.
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AlertComponent } from './alert.component';
@Component({
selector: 'app-root',
template: `
<app-alert #alert>My alert</app-alert>
<button (click)="showAlert()">Show Alert</button>`
})
export class AppComponent implements AfterViewInit {
@ViewChild('alert') alert;
showAlert() {
console.log('alert (showalert)', this.alert.nativeElement);
this.alert.show();
}
ngAfterViewInit() {
console.log('alert (afterviewinit)', this.alert.nativeElement);
}
}
请看看插头.
我有一个"仪表板",可以加载已配置的元素.仪表板模板具有以下内容:
<div class="dash-container" [ngGrid]="gridConfig">
<div *ngFor="let box of boxes; let i = index"
[(ngGridItem)]="box.config"
(onItemChange)="updateItem(i, $event)"
(onResize)="onResize(i, $event)"
(onDrag)="onDrag(i, $event)"
(onDragStop)="onDragStop(i,$event)"
[ngClass]="box.class"
>
<div class="handle"><h4>{{box.title}}</h4></div>
<div [innerHTML]= "box.content"></div>
</div>
</div>
现在<div [innerHTML]= "box.content"></div>不行,因为非标准元素被消毒了.运行最新的Angular 2.4.6(RC 6).
我看一下我能找到的动态组件的例子 - 但我看到的只是他们只是将组件添加到当前组件 - 但我需要它们在一个非常特定的div中,如上例所示.
ComponentFactoryResolver通常与...一起使用@ViewChild.但我不能在一个循环中这样做:
ngAfterViewInit() {
const dashWidgetsConf = this.widgetConfigs();
for (var i = 0; i < dashWidgetsConf.length; i++) {
const conf = dashWidgetsConf[i];
@ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef;
var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent);
widgetTarget.createComponent(widgetComponent);
}
}
@viewchild给'装饰者在这里无效'.如何从conf列表中加载组件(在循环中)并将它们添加到组件中的特定div(divs …
所以我在Angular 5应用程序中有一个工作的角度材料数据表,但是当我尝试添加排序功能时(基于这里的官方文档:https://material.angular.io/components/table/overview#sorting和例如:https://stackblitz.com/angular/dnbermjydavk？file = app%2Ftable-overview-example.html)我无法让它工作.它似乎添加了排序功能/箭头,我可以点击它,但没有任何反应.
这是我的HTML:
<div class="container">
<mat-table #table class="dataTable" *ngIf="showDataForm;else loadingTemplate" [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="titel">
<mat-header-cell *matHeaderCellDef mat-sort-header>Titel</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.titel}}</mat-cell>
</ng-container>
<ng-container matColumnDef="EADDraftingStage">
<mat-header-cell *matHeaderCellDef mat-sort-header>EADDraftingStage</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.EADDraftingStage}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
</mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>
<ng-template #loadingTemplate>
<div>
<p>Please wait, the data is loading...</p>
<img src="../../assets/giphy.gif">
</div>
</ng-template>
<button mat-raised-button class="submitButton" …我有两个在条件下显示的输入元素*ngIf。
<input type="text" id="textInput" *ngIf="showTextInput">
<input type="number" id="numericInput" *ngIf="showNumericInput">
<button (click)="editButtonClicked($event)">
单击按钮应将焦点设置到适当的输入元素。
editButtonClicked(event) {
// Focus on either #textInput or #numericInput element
}
我研究了ElementRef来给出 html 输入元素标签，#textInput然后在类上定义它们，例如：
@ViewChild('textInput') textInput: ElementRef;
...但显然这不适用于有条件的元素*ngIf。
如何聚焦于输入元素、按钮的 onClick？
我有一组动态创建的选项卡,具体取决于我的输入数据.我想要做的是能够找出当前选择的选项卡.在下面的示例代码中,我有一个选项卡控件,在所有这些之下,我有一个按钮,单击该按钮将删除所选选项卡.我试图保持这个相对简单,它可能看似做作,但我希望它能说明我的意思.
这是我的代码:
<div class="col-md-12">
<ngb-tabset *ngIf="selectedInfo" type="groups" >
<ngb-tab *ngFor="let tab of selectedInfo.groups" title={{tab.name}} >
// some stuff in the tabs
</ngb-tab>
</ngb-tabset>
</div>
<div>
<button class="btn btn-primary float-left" (click)="deleteTab()" > Delete Tab </button>
</div>
export class MyTabs implements OnInit {
selectedIfno: MyInfoClass;
ngOnInit(): void {
// init data
}
deleteTab() {
}
}
所以我想说我想删除当前选中的标签.我如何知道当前选择的标签？
我一直在关注角材料数据表分页程序教程这里。
当他们构造自己的分页器时，他们使用
@ViewChild(MatPaginator) paginator: MatPaginator;
在他们的component.ts文件中。使用此声明，他们以后可以访问同一文件中的属性：
ngAfterViewInit() {
this.paginator.page
.pipe(
tap(() => this.loadLessonsPage())
)
.subscribe();
}
没有问题。
当我在组件中执行相同的操作时：
export class AllMatchesComponent implements OnInit, OnDestroy, AfterViewInit {
...
@ViewChild(MatPaginator) paginator: MatPaginator;
...
ngAfterViewInit(){
console.log(this.paginator);
this.paginator.page
.pipe(
tap(()=> this.loadMatchesPage())
)
.subscribe();
}
...
，我在控制台中收到以下错误：
错误TypeError：无法读取AllMatchesComponent.ngAfterViewInit上未定义的属性'page'（all-matches.component.ts：50）
当我尝试看一下他们的示例存储库（转到分支2-data-table-finished）时，代码包含所有过滤和排序语法，而我在本教程中尚未涉及。换句话说，它们的示例代码与本教程中的步骤不相似，并且没有其他分支可以更简单的状态捕获代码。
我不知道为什么未定义分页器。有任何想法吗？
我的个人仓库可以在这里找到：
git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout SO-paginator-freeze
为了方便起见，以下是全部all-matches.component.ts：
import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
import { D3Service } from '../d3.service';
import { DatabaseService } from …我有一个角度材料表。当我用 html 包围表格时<div *ngIf="true">，表格会呈现，但单击标题列时数据不再排序。
以以下示例为例：https : //material.angular.io/components/table/overview#sorting
并修改它，只需添加<div *ngIf="true"> ... </div>演示此行为。示例位于：https : //stackblitz.com/edit/angular-quzvjv