我试图将多个传递ng-template给我的可重用component(我的表组件),内容投影。现在我需要获取每个传递的参考值,ng-template以便我可以使用该值来知道为哪一列传递了哪个模板。基本上,我正在创建一个可重用的表组件(在 Angular 材料表之上),用户可以在其中为每列传递一个单独的模板。
请建议 - 或者有没有更好的方法来做到这一点?
temp.component.ts
import { Component, OnInit, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';
@Component({
selector: 'my-table',
template: `<h1>This is the temp component</h1>`,
styleUrls: ['./temp.component.scss']
})
export class TempComponent implements OnInit, AfterContentInit {
constructor() { }
@ContentChildren(TemplateRef) tempList: QueryList<TemplateRef<any>>;
ngOnInit() {
}
ngAfterContentInit() {
console.log('template list');
console.log(this.tempList);
}
}
Run Code Online (Sandbox Code Playgroud)
应用程序组件.html
<my-table>
<ng-template #column1 let-company let-func="func">
<h1>this template is for column 1</h1>
</ng-template>
<ng-template #column2 let-company let-func="func">
<h1>this template is for …Run Code Online (Sandbox Code Playgroud) 今天,sudeenly我开始得到这个错误 "无法读取属性'NullLogger'未定义", 同时尝试在我的角度4应用程序中添加一个组件(ng gc abc).当我在谷歌搜索它时,人们建议我们需要将我们的cli版本更新到1.4.10.但问题是为什么我们现在为1.4.10以下的所有angular/cli版本得到这个错误? .我现在不想更新我的CLI版本.有谁知道它为什么会发生?
以下是我的package.json文件,
"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/router": "^4.4.6",
"angular2-csv": "^0.2.5",
"bootstrap": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng-select": "^1.0.0-rc.3",
"ng2-dragula": "^1.5.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2",
"toastr": "^2.1.2",
"underscore": "^1.8.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.7",
"@angular/compiler-cli": "^4.4.6",
"@angular/language-service": "^4.4.6",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"@types/toastr": "^2.1.35",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": …
我正在开发一个项目,我们已经有一个使用 Asp.Net 构建的现有网站。我们计划添加一些新页面并更新一些现有页面。我计划使用 Webpack 在 Angular 5 中开发这些新页面。由于预算限制,我们无法将整个网站转换为 Angular,但最终目标是完全转换为 Angular 5。
最近有人开发过这样的混合应用程序吗?
有人可以解释一下它是否可行,以及是否由于混合技术而对性能产生任何影响。
我有一个名为IHistoryData的接口
export interface IHistoryData {
CourseId: string,
CourseName: string,
Duration: number,
IsMandatory: boolean,
CompetencyList: string[],
IsActive:boolean
}
Run Code Online (Sandbox Code Playgroud)
第二个小接口称为 ICurrentData,
export interface ICurrentData {
CourseId: string,
CourseName: string,
Duration: number,
}
Run Code Online (Sandbox Code Playgroud)
ICurrentData属性是IHistoryData属性的子集。
现在我尝试使用ES6 破坏功能将IHistoryData[]转换为ICurrentData[],但无法找到任何可行的解决方案。是否可以使用析构将大接口转换为小接口?
我正在使用 TS 2.3.3 和 Angular 4.4
我试图在类型脚本接口中编写箭头函数,如下所示,但出现错误“类‘ToastrService’错误地实现了接口‘IToastr’。”
interface IToastr{
(message:string,title:string):void;
}
@Injectable()
export class ToastrService implements IToastr {
(message:string,title:string):void {
toastr.success(message,title);
}
}
Run Code Online (Sandbox Code Playgroud)
我的问题是:我们可以在 TS 接口中定义一个返回类型为 void 的函数签名吗?
我也尝试搜索谷歌,但没有找到任何例子。谢谢 !!