我试图从一个文件导入组件另一个根组件文件.它给出了错误..
zone.js:484未处理的Promise拒绝:模板解析错误:'courses'不是已知元素:1.如果'courses'是Angular组件,则验证它是否是此模块的一部分.2.如果"courses"是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的"@NgModule.schema"以禁止显示此消息.("
我的第一个Angular 2 App
[错误 - >]"):AppComponent @ 0:31;区域:;任务:Promise.then;值:错误:模板解析错误:(...)错误:模板解析错误:'courses'不是已知元素:
我的app.component.ts就像[根组件文件]
import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1><courses></courses>',
directives:[CoursesComponent],
})
export class AppComponent { }
和我的courses.component.ts是;
import { Component } from '@angular/core';
@Component({
selector: 'courses',
template: '<h1>courses</h1>'
})
export class CoursesComponent { }
从app.component中的courses.component.ts文件导入课程组件时,我无法在其中声明指令 @Component{}
directives:[CoursesComponent] 给我错误
请告知解决方案.
我有点困惑.
看到这个简单的指令:
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
private text: string;
private enabled: boolean;
@Input() myDirective:string;
@Input('myText')
set myText(val: string) {
this.text = val;
}
@Input('myEnabled')
set myEnabled(val: boolean) {
this.enabled = val;
}
ngOnInit() {
console.log("myDirective string: " + this.myDirective);
console.log("myText string: " + this.text);
console.log("myEnabled boolean: " + this.enabled);
}
}
如果我的HTML看起来像这样:
<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div>
输出将是:
myDirective string: myDefaultText real value // good
myEnabled boolean: true // good
myText string: undefined // Why?
如果我删除[] myText …
我正在尝试routerLink根据组件中的动态项集来设置指令中的值.但Angular2引发了一个错误:
EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("
<a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">
{{item.text}}
</a>
"): Header@5:40
header.component.ts
import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
@Component({
selector: 'app-header',
templateUrl: './app/components/header/header.component.html',
directives: [ROUTER_DIRECTIVES]
})
export class AppHeader {
headerItems: Object[] = [];
constructor() {
this.headerItems.push(
{ classes: 'navLink', routerLink: ['/Home'], text: 'Home' }
);
}
}
header.component.html
<div …我遵循这个教程.在从api.github获取用户列表的途中我得到错误:
找不到支持对象'[object Object]'
我认为它与之相关
<ul>
<li *ngFor = "#user of users">
{{user | json}}
</li>
</ul>
在我的代码中,因为在它之前没有任何错误,并且我不确定数据是否来自get请求,只是单击didnt没有给出任何错误,这是我的代码到目前为止
@Component({
selector: 'router',
pipes : [],
template: `
<div>
<form [ngFormModel] = "searchform">
<input type = 'text' [ngFormControl]= 'input1'/>
</form>
<button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
<li *ngFor = "#user of users">
{{user | json}}
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;
constructor(public http: Http, fb: FormBuilder) {
this.searchform …我想在我的组件中显示不同的模板.只有一个会显示.如果hasURL是true,我想表明<a></a>.如果hasURL是false,我想表明<button></button>.
问题如果hasURL为false,组件显示按钮,但ng-content为空.因为它已经在第一篇中读到了"a></a>
有没有办法解决这个问题？
<a class="bouton" href="{{ href }}" *ngIf="hasURL">
<ng-content>
</ng-content>
</a>
<button class="bouton" *ngIf="!hasURL">
<ng-content>
</ng-content>
</button>
谢谢!
我需要根据计算的百分比做一个进度弧,我创建了一个自定义指令来访问用户的svg属性,同时在我的模板中更新,我收到以下错误:
__CODE__
__CODE__ 等等..
我收到所有svg属性的上述错误.
以下是我在玉器中的代码:
progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8")
以下是我的指令代码:
import {Component,Input,AfterViewInit} from '@angular/core';
@Component({
selector:'progress-arc',
template:`
<svg height="100" width="100">
<circle fill="white"
cx="{{parsedSize/2}}"
cy="{{parsedSize/2}}"
r="{{radius}}"
stroke="{{stroke}}"
stroke-width="{{strokeWidthCapped}}"
stroke-dasharray="{{circumference}}"
stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>
</svg>`,
providers: [],
directives: []
})
export class ProgressArc implements AfterViewInit {
@Input('size') size:string;
@Input('strokeWidth') strokeWidth:string;
@Input('stroke') stroke:string;
@Input('complete') complete:string;
parsedStrokeWidth:number;
parsedSize:number;
parsedComplete:number;
strokeWidthCapped:number;
radius:number;
circumference:number;
ngAfterViewInit() {
this.parsedSize = parseFloat(this.size);
this.parsedStrokeWidth = parseFloat(this.strokeWidth);
this.parsedComplete = parseFloat(this.complete);
this.strokeWidthCapped = Math.min(this.parsedStrokeWidth, this.parsedSize / 2 - 1);
this.radius …在给定的属性指令示例(即添加外观/行为的指令)中,我们在主机元素上设置了一个相当简单的样式.例如
import {Directive, ElementRef } from 'angular2/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(element) {
element.nativeElement.style.backgroundColor = 'yellow';
}
static get parameters(){
return [[ElementRef]];
}
而不是设置样式,我可以使用样式吗？例如
@Directive({
selector: '[myHighlight]',
styles: [':host { background-color: yellow; }']
})
这似乎对我不起作用？
我正在做一些稍微复杂的事情,这导致了相当数量的蒙特哥特代码,设置了很多样式,使用了AnimationBuilder等等.对我来说感觉就像把它分成CSS中的类和动画要好得多.
ViewEncapsulation =模拟/默认是否重要？
我是Angular的新手,我还在努力理解它.我已经按照微软虚拟学院的课程进行了测试,这很棒,但我发现他们所说的内容与我的代码行为之间存在一些差异!具体来说,我试图"将一个组件放在另一个组件中",如下所示:
@Component({
selector: 'parent',
directives: [ChildComponent],
template: `
<h1>Parent Component</h1>
<child></child>
`
})
export class ParentComponent{}
@Component({
selector: 'child',
template: `
<h4>Child Component</h4>
`
})
export class ChildComponent{}
这是他们在课程上做的相同的例子,但在我的代码中不起作用!特别是VisualStudio告诉我,组件装饰器中不存在'directives'属性.我怎么解决这个问题？
在Angular 1中,我们可以创建一个指令属性.我们如何使用@Input在Angular 2中做到这一点？文档没有提到它.
例如.
Component({
selector: 'my-dir',
template: '<div></div>'
})
export class MyComponent {
@Input() a:number; // Make this a required attribute. Throw an exception if it doesnt exist
@Input() b:number;
constructor(){
}
}
如何跳过数组中的第一个索引？
<li *ngFor="#user of users">
{{ user.name }} is {{ user.age }} years old.
</li>