在我的应用程序中，我有不同的 CSS 文件，如 fire.css、lake.css，每个文件都为完整的应用程序提供了不同的外观。
目前，我只用 1 个文件 main.css 实现并将这个文件添加到
index.html
<link rel="stylesheet" href="resources/styles/main.css">
<link rel="stylesheet" href="resources/styles/themes.css">
<link rel="stylesheet" href="resources/styles/common.css">
<link rel="stylesheet" href="resources/styles/plugins.css">
现在我想在用户从下拉列表中选择时动态更改它。
我的想法：将所有 css 文件复制到 app 文件夹并在那里添加主题。
文件夹结构是
app
|-----app.component.ts
|-----app.routes.ts
|-----main.css
|-----lake.css
|-----登录
|- ----其他组件...
我在app.components.ts App 组件中添加了 css 到 styleUrls现在是
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'workshop-app',
template: `
<body>
<router-outlet></router-outlet>
</body>
`,
directives : [ ROUTER_DIRECTIVES ],
styleUrls : ['app/lake.css']
})
export class AppComponent { }
Lake.css …
css stylesheet angular2-directives angular2-template angular
我已经构建了一个angular2 RC5应用程序,它应该使用至少2级嵌套组件/指令来构建干净且可读的html模板.
目前的结构是:
只使用pageComponent没问题.
添加和使用指令来显示tabPageComponent也可以.
在tabPageComponent中添加和使用其他组件/指令会引发错误
模板解析错误:嵌入模板上的组件
我的HTML看起来像这样:
pageComponent.html
<p-tabView>
<p-tabPanel header="Tab 1">
<tab-template></tab-template> /* this references tabPageComponent */
</p-tabPanel>
<p-tabPanel header="Tab 2">
Content 2
</p-tabPanel>
</p-tabView>
tabPageComponent.html
<anotherComponent></anotherComponent>
如果我只是使用普通的html tabPageComponent.html并且没有声明任何指令,一切都按预期工作.只要我添加另一个自定义指令,就会发生错误.
美国嵌套指令是否可能？什么可能导致我遇到的错误？
如果需要进一步的代码来解释问题或帮助找到错误,请询问.
更新
这是我的@ngModule:
// Left out several import statements
@NgModule({
declarations: [
AdminAppComponent,
TestComponent,
OrdersComponent,
TemplatesComponent,
TemplateComponent,
TemplatePageComponent,
UsersComponent,
UserComponent,
StatsComponent,
ProvidersComponent,
ProviderComponent,
AccessDeniedComponent,
LoginComponent,
// ComplexElementComponent,
// ComplexElementListComponent,
// BaseElementComponent,
// BaseElementListComponent,
WikiComponent,
GrowlComponent
],
providers: [
LocalStorageService,
ApicallsService,
AuthService, …根据食谱中的示例，我正在像这样动态创建组件：
private loadComponent(): void {
const componentFactory = this.factoryResolver.resolveComponentFactory(MyInputComponent);
const viewContainerRef = this.componentHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<IComponent>componentRef.instance).data = data;
}
MyInputComponent 的模板如下所示：
<input type="text" [(ngModel)]="data.inputProp">
当用户输入输入时，我需要更新父级中 data.inputProp 的值。
我在一些例子中看到过这个，但不确定它有什么作用？
componentRef.changeDetectorRef.detectChanges();
我还阅读了有关在父级中订阅子级 EventEmitter的内容，但只看到了使用单击事件的示例。将包括文本输入在内的各种数据更新回父级的更好方法是什么？
我正在使用 Angular 4 RC3
我有一个左侧边栏,位置固定.我想要实现的是,当我滚动大约50或60像素时,左侧边栏的位置应该更改为固定.
左sidebar.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'left-sidebar',
templateUrl: 'left-sidebar.html',
styleUrls: ['left-sidebar.scss']
})
export class LeftSideBarComponent {
}
左sidebar.html
<div class="col-sm-2 left-nav">
</div>
CSS
.left-nav {
position: absolute;
background: #424242;
height: 100%;
overflow: auto;
padding: 0;
z-index: 1;
}
如何在滚动条上将左侧边栏的位置从绝对位置更改为固定位置？
我在 IE11 中遇到 @HostListener问题。我需要捕捉用户何时使用 keydown 事件作为空格，我的代码非常简单，它在 Chrome 和 FireFox 中运行良好，但在 IE 中不起作用。
import {Component, HostListener} from '@angular/core';
@Component({
selector: 'home',
styleUrls: ['./home.component.css'],
templateUrl: './home.component.html'
})
export class HomeComponent {
@HostListener('window:keydown.control.space', ['$event'])
@HostListener('window:keydown.space', ['$event'])
spaceEvent(event: any) {
alert('space key!');
}
}
在IE开发者工具中，我没有看到任何错误或警告，我不知道如何解决这个问题。任何建议如何解决这个问题？
internet-explorer typescript ecmascript-6 angular2-template angular
问题是将对象或多个参数从模板传递到组件，并使用它们将数据添加到 API。
任务.service.ts
addTasks(task: Task): Observable<Task>{
let headers = new Headers({'Content-type': 'application/json'});
let options = new RequestOptions({ headers: headers });
return this.http.post(this.tasksUrl, {task}, options)
.map(this.extractData)
.catch(this.handleError);
}
任务.component.ts
addTasks(task){
this.taskService.addTasks(task)
.subscribe(
task => this.tasks.push(task),
error => this.errorMessage = <any> error
);
}
模板输入：
<input #todoTime type="text" class="form-control">
<input #todoName type="text" class="form-control">
模板按钮：
<button name="todoAdd" (click)="addTasks({name: todoName.value, time: todoTime.value}); todoName.value='',todoTime.value='' ">add</button>
我有一个文件data.json,我想在我的angular 2应用程序中导入.我正在获取带有HTML输入标签的文件.
<input type="file" (change)="onImport($event)"/>
在我的typescript文件中,我想读取这个data.json文件,并将文件内容存储在JSON数组中.我已经搜索但找不到任何方法来阅读文件或任何可以帮助我的库.
我使用下面的代码在 angular 2 中使用 prime-ng carousel 显示从模板标签内的 excel 上传的数据。
exceldata.html：-
<p-carousel headerText="Category" [value]="ExcelRowDatas" class="pcaro">
<template ngFor let-ExcelRowData [ngForOf]="ExcelRowDatas" let-i="index" pTemplate="item">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-6">Index No.</div>
<div class="ui-grid-col-6">({{i}})</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Place</div>
<div class="ui-grid-col-6">{{ExcelRowData['Place']}}</div>
</div>
</div>
</template>
</p-carousel>
exceldata.ts:-
let ExcelRowDatas = [{"Place": "New York"}, {"Place": "London"}, {"Place": "Paris" }]
Plunker：- https://plnkr.co/edit/PUOlAQ7abbAJ7el4ciQ2?p=preview
我无法在 ng-carousel 中获得模板标签内行的索引。但是我能够在不使用 ng-carousel 的情况下获取模板内的索引。如何使用模板获取 ng-carousel 内的索引值？
我有一个可以是正值或负值的数字。我想总是把它打印成负片。有没有办法在 Angular 2 html 代码中格式化它？我知道如何在打字稿/javascript 中做到这一点。但是，想知道我是否可以直接在 Angular HTML 代码中进行格式化
我想创建一个可以在角度模板中使用的可重用函数.我创建了一个函数:
export function stringSplit(string : string, separator : string = '/') : any {
return string.split(separator);
}
我试图像这样添加到模板中:
<p> stringSplit('hello/user') </p>
但我得到这个错误:
ERROR TypeError: _co.stringSplit is not a function
我不确定如何在角度中创建和使用全局函数.
我们可以角度执行此操作吗？
在这种情况下,最佳解决方案是什么？