标签: angular2-template

我有这样的事情:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>'
})
export class ColumnComponent {

    @Input() columnWidth: string = '0';        

    constructor() {}
}

我想申请财产columnWidth时至[ngStyle]上

<ng-content></ng-content>

父元素,做这样的事情:

<div [ngStyle]="{'width': columnWidth+'px'}" > ....

我知道如何将样式应用于主机元素:

:host {  /*styles*/  }

但我不知道将参数传递给它.

我想使用ngSwitch有条件地呈现一些内容,但我希望该内容是唯一要呈现给DOM的内容.我将以一个例子来说明.

这就是我目前所拥有的:

<div [ngSwitch]="thing.name">
    <template ngSwitchWhen="foo">
        <div>FOOOOOO</div>
    </template>
    <template ngSwitchWhen="bar">
        <div>BARRRR</div>
    </template>
    <template ngSwitchWhen="cat">
        <div>CAT</div>
    </template>¯
    <template ngSwitchWhen="dog">
        <div>DOG</div>
    </template>
</div>

我想将父元素从a更改<div>为a,<template>因此只有最内部元素才会实际插入到DOM中.我怀疑它可能是可能的,因为我知道你可以做类似的事情ngFor,即:

<template ngFor [ngForOf]="things" let-thing="$implicit">

但是,我还没有弄清楚如何才能让它工作 ngSwitch

我试图了解如何在a ng-content为空时创建if来显示.

<div #contentWrapper [hidden]="isOpen">
    <ng-content ></ng-content>
</div>

<span *ngIf="contentWrapper.childNodes.length == 0">
    <p>Display this if ng-content is empty!</p>
</span>

当内容为空时我尝试使用那个显示数据,但即使信息为空也不会显示<span>标签

谢谢,永远感谢你的帮助.

我正在尝试在单击时禁用按钮.通过单击我正在调用一个函数,我想要使用该函数禁用该按钮.如何使用ElementRef访问按钮的属性并禁用它？我对如何使用ElementRef不是很熟悉.任何帮助将不胜感激!

我有一个数组,我可以使用ng-for语法循环.但是,最终我只想访问该数组的单个元素.我无法弄清楚如何做到这一点.

在我的组件脚本中

  export class TableComponent {

    elements: IElement[];

}

在我的模板中,我能够遍历元素

<ul>
<li *ngFor='let element of elements'>{{element.name}}</li>
</ul>

但是,尝试通过使用分区引用项目来访问元素数组中的项目

  x {{elements[0].name}}x

似乎不起作用.

模板中的格式非常明确,因此我希望能够在模板中显式访问数组的每个元素.

我不明白基本的东西......

我有一个关于Angular 2 rc5中动态组件创建的问题.

所以我们假设我们有两个普通的角度分量:

  @Component({
      template: `
        <div id="container">
          <h1>My Component</h1>
        </div>
       `,
      selector: 'my-app'
  })
  export class AppComponent { }

  @Component({
      template: '<p>{{text}}</p>',
      selector: 'simple-cmp'
  })
  export class SimpleComponent { public text='Hello World!' }

然后一些外部非角度代码块修改DOM:

let newNode = document.createElement('div');
newNode.id = 'placeholder';
document.getElementById('container').appendChild(newNode);

这是操作后的一些可能的树:

 <div id="container">
      <h1>My Component</h1>
      <div id="placeholder"></div>
 </div>

所以我要做的就是将SimpleComoponent实例动态添加到#placeholder div中.我怎样才能达到这个效果？

我一直在尝试使用ComponentFactory.createComponent(injector,[],newNode),但它添加了组件,但生命周期挂钩和绑定都没有工作.

我相信有一些方法可以使用ViewContainerRef来实现它,但是如何将它与动态创建的节点链接？

这是我期望的结果

 <div id="container">
      <h1>My Component</h1>
      <div id="placeholder">
        <simple-cmp>Hello world!</simple-cmp>
      </div>
 </div>

谢谢!

在我的应用程序中,我想在组件加载时自动将焦点放在表单的第一个字段上.任何人都可以指导如何实现这一点,而不是重复,因为我想在我的应用程序中的每个表单(活动表单)上.

很抱歉,如果这很简单,但只是无法弄清楚...在我的Angular测试应用程序中,我试图在我的html模板中附加一个id以下内容:

<a href="https://www.domainname.com/?q="+{{text.id}}>URL</a>

这不会失败并出现错误(错误:无法在'Element'上执行'setAttribute')并且我不确定如何将{{text.id}}附加到此网址...我是否需要在我的组件中执行此操作,还是可以在html模板中以某种方式完成？

BTW.正如人们所预料的那样,这很好用(但这不是我想做的,我需要将text.id附加到url):

<a href="https://www.domainname.com/?q=">{{text.id}}</a>

有什么建议？

我有角度2的消息传递项目.

路由条件:

1) path: /login , component: LoginComponent
2) path: /inbox , component: InboxMessageComponent
3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only",
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"

所以我创建了两个名为app-routing.module.ts和inbox-routing.module.ts的路由模块.

APP-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent},
            { path: 'inbox', component: InboxMessageComponent },
            { path: '', component: InboxMessageComponent },
            { path: '**', component: NotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})

收件箱 - routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {path: '/inbox/list',component: InboxMessageListComponent},
            {path: '/inbox/detail/:id',component: …

给responsece.json()提供的功能不适用于我的情况

component.ts

 this.AuthService.loginAuth(this.data).subscribe(function(response) {
  console.log("Success Response" + response)
},
  function(error) {
  console.log("Error happened" + error)
},
  function() {
  console.log("the subscription is completed")
});

AuthService.ts

     loginAuth(data): Observable<any> {
  return this.request('POST', 'http://192.168.2.122/bapi/public/api/auth/login', data,{ headers:this. headers })
      .map(response => response)
      //...errors if any
      .catch(this.handleError);
  }

给[object,objet]如果我把地图功能服务像.map(response => response.json())给出错误就像responce.json()不是函数

请帮我