标签: angular2-template

Angular 2允许使用`字符来引用它们来编写多行模板.也可以将多行模板放入.html文件中并引用它templateUrl.

将模板直接放入组件中似乎很舒服,因为它只是在一个地方,但这样做有什么缺点吗？

第一种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    `
})
export class AppComponent { }

vs第二种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }

连同multi-line.html:

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p> 

我知道在Angular2中我可以通过这样做将一个类'red'添加到组件的selector元素:

@Component({
    selector: 'selector-el',
    host: {
        '[class.red]': 'true'
    },
    ...
})

我想知道是否有办法向主机添加动态类,类似于你对NgClass的处理方式(我知道实际上不支持NgClass,我正在寻找可能的解决方案):

@Component({
    selector: 'selector-el',
    host: {
        '[NgClass]': 'colorClass'
    },
    ...
})
...
constructor(){
    this.colorClass = 'red';
}

假设我有一个具有固定输入参数类型的组件,

@Component({
    selector: 'fixed',
    template: '<div>{{value}}</div>'
})
export class FixedComponent {
    @Input() value: string;
}

我如何将该参数类型设为通用,即

@Component({
    selector: 'generic',
    template: '<div>{{value}}</div>'
})
export class GenericComponent<T> {
    @Input() value: T;
}

也就是说,如何在父组件的模板中传递类型？

<generic ...></generic>

我有一个输入字段映射到我的控制器中的实体与input双向绑定.

<input type="text" [(ngModel)]="entity.one_attribute" />

当我初始化我的控制器时,我有这个实体:

{ one_attribute: null }

如果用户开始填写该字段但未立即提交表单并清空该字段,则我的实体将更新为:

{ one_attribute: "" }

是否可以定义空字符串应自动更改为null？

我在视图中有三个按钮,在页面加载时我显示第一个按钮内容.单击按钮后,该按钮将变为活动状态,但在页面加载时,初始按钮不会设置为活动状态.为了显示第一个按钮激活,我将其添加到div:

[ngClass]="'active'" 

现在的问题是,当单击另一个按钮时,第一个按钮保持活动类.我正在评估基于字符串显示的数据.点击每个按钮后,字符串会发生变化.

如何添加条件来检查当前字符串？因此,如果字符串与显示的当前数据匹配,那么将活动类添加到此按钮？

所以这就是我要找的东西:

[ngClass]="'active'" if "myString == ThisIsActiveString;

这是我当前的按钮,但是当我用这种语法添加它时,不会添加该类:

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

要清楚,字符串在页面加载时默认为"EQUIFAX".

这基于答案:

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

我有这个我通过Id引用的元素:

    let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');

当浏览器到达元素的底部时我需要监听.

怎么做到这一点？

我对使用angularfire2的angular(v2.4)应用程序在开发环境(快速服务器)中运行顺畅.当我使用"npm run build"构建它时,Webpack2构建应用程序并将其放入名为"target"的文件夹中.当我使用"npm run server"从目标文件夹运行构建的应用程序时,服务器启动并且浏览器不会显示应用程序的标题.在浏览器的控制台中,我收到此错误:

"未处理的承诺拒绝:模板解析错误:'app'不是已知元素:如果'app'是Angular组件,则验证它是该模块的一部分.如果'app'是Web组件,则添加"CUSTOM_ELEMENTS_SCHEMA"到这个组件的'@ NgModule.schemas'来抑制这个消息."

我在这里为您提供应用程序的应用程序组件index.ts,main.ts.万一,如果你想看到webpack.config.js,我也可以提供.

这是我的应用程序组件:

import { Component } from '@angular/core';
import { AuthService } from '../../auth';

@Component({
  selector: 'app',
  template: ` 
    <app-header
      [authenticated]="auth.authenticated"
      (signOut)="signOut()"></app-header>

      <router-outlet></router-outlet>

     <app-footer
      [authenticated]="auth.authenticated"></app-footer>      
  `
})

export class AppComponent {
  constructor(private auth: AuthService) {}

  signOut(): void {
    this.auth.signOut();
  }
}

这是我的app模块的index.ts:

import {NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';

import { AuthModule } from '../auth';
import { FirebaseModule } …

由于我听说Angular的路由器支持嵌套的<router-outlet>标签,我正在尝试使用其中的两个.我正在使用最新的Angular-CLI,从ui-router转换为Angular的路由器.我无法获得第二个路由器来填充内容.

(父路由工作正常)app-routing.module.ts

...
const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: 'dashboard',
        pathMatch: 'full',
        component: DashboardComponent // this holds the second router-outlet
    },
    { path: '**', component: LoginComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

app.component.ts - 这只是持有路由器插座,并在顶层工作正常...

<router-outlet></router-outlet>

仪表板包含通用页眉,页脚,侧边栏等.这就是我想在顶级路由器插座中使用它的原因.子路由器插座将填充子视图,但不会填充.

尝试1 dashboard-routing.module.ts

export const dashboardRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' …

我有标题,应该在子模块和父模块中使用.这是在父模块中导入和使用但是当尝试导入和使用子组件时它显示错误.我的意思是如何使用父模块和子模块的公共标头

未捕获(承诺):错误:

类型HeaderComponent是2个模块的声明的一部分:AppModule和ProviderModule!请考虑将HeaderComponent移动到导入AppModule和ProviderModule的更高模块.

您还可以创建一个新的NgModule,它导出并包含HeaderComponent,然后在AppModule和ProviderModule中导入该NgModule.

我有一个事件冒泡的情况.示例:

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

标签通过innerHtml从另一个组件呈现.问题:当我点击链接时,也会触发元素的click事件.如何解决问题(停止传播doSomething()),知道事件处理程序(或任何角度2代码)不能通过innerHtml传递？

谢谢!