标签: angular2-template

我将开发一个简单的Angular 2应用程序.我使用Angular CLI创建了一个带路由的项目,并使用'ng generate component'命令向应用添加了几个组件.然后我在app-routing.module.ts中指定了路由,如下所示.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
import { ErrorComponent } from './error/error.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
    {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'specialpage',
    component: SpecialpageComponent
  },
  { …

我正在写一个Angular 2单元测试.我有一个@ViewChild子组件,我需要在组件初始化后识别.在这种情况下,它是Timepickerng2-bootstrap库中的一个组件,但具体情况无关紧要.在我之后detectChanges(),子组件实例仍未定义.

伪代码:

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}


// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    })); …

我有自定义组件:

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }
}

我可以像这样使用它:

<my-custom-component></my-custom-component>

但我怎么能传递一个变量呢？例如:

<my-custom-component custom-title="My Title"></my-custom-component>

并在我的组件代码中使用它？

我正在使用Angular 2和SystemJS并尝试将样式表添加到组件中.
因为我正在使用SystemJS ,所以我现在不能使用相对路径,所以我使用了组件模板url的绝对路径以及样式url.
但内联样式工作正常(即styles: ['h1 {font-size: 12px; }'])

该组件看起来像这样:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

样式表dashboard.css永远不会被加载(也不会返回任何错误).

工具的版本:

〜angular 2: 2.0.0-beta.6
〜systemjs: 0.19.20
〜typescript: 1.8.0

我有一个Angular 2组件,我想<div id ="myId">通过它的id 检索一个元素div .我尝试:document.getElementById("myId")在我的组件(TypeScript)中,但我收到一个错误:"找不到名称文档".我看到在其他帖子中我们可以使用@ViewChild做类似的事情,但是我看不出我们如何使用div,任何想法？

我是新手angular,angular2特别是.我正在尝试编写一个容器组件,其中应包含子组件.

例如,容器组件:

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyList {
}

子组件:

import { Component } from 'angular2/core'

@Component({
  selector: 'my-item',
  template: `
    <li>
      <ng-content></ng-content>
    </li>
  `
})
export class MyItem {
}

我想做这个结构:

<my-list>
    <my-item>One</my-item>
    <my-item>Two</my-item>
</my-list>

要呈现给以下一个:

<my-list>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</my-list>

但相反,我有容器的主机元素和保留的项目:

<my-list>
    <ul>
        <my-item>
            <li>One</li>
        </my-item>
        <my-item>
            <li>Two</li>
        </my-item>
    </ul>
 </my-list>

Plunk可在这里找到

问题:有没有办法消除宿主元素并只留下渲染模板？

如何使用angular2使用html插入字符串.我知道在角度1.x有$interpolate(templateString)(miniScope);但我没有找到相同的angular2.

假设我有这样的模板: Hello my name is {{name}}

和绑定就像 name: "<strong>Pardeep</strong>"

所以我想要结果

您好,我的名字是Pardeep

请参阅angular1

对于angular2看到这里,但我无法理解清楚

任何帮助？

我有一个嵌套一级的点击事件.当我点击孩子时,会调用预期的函数,但也会调用父函数.这是代码

<li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)">
    <input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" />
</li>

所以当复选框改变changeTaskStatus()并且showTask()一起调用时.我希望父母在复选框更改时保持安静.我该如何实现这一目标？在Angular 1中很容易处理这个问题

我试过的事情都失败了

用于$event.stopPropagation()复选框的单击事件,该事件未发生任何变化

<input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" />

如何处理/提供@Input,并@Output在角2动态创建组件的属性？

这个想法是在调用createSub方法时动态创建(在这种情况下)SubComponent.分叉很好,但我如何为SubComponent中的属性提供数据.另外,如何处理/订阅SubComponent提供的事件？@Input@Output

例如: (两个部件在相同的NgModule)

AppComponent

@Component({
  selector: 'app-root'
})  
export class AppComponent {

  someData: 'asdfasf'

  constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }

  createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

  onClick() {
    // do something
  }
}

子

@Component({
  selector: 'app-sub'
})
export class SubComponent {
  @Input('data') someData: string;
  @Output('onClick') onClick = new EventEmitter();
}

我正在尝试使用angular2的自定义属性,如下所示

 <a href="javascript:void(0)" title="{{inst.title}}" data-loc="{{inst.actionval}}">

这给了我以下错误

EXCEPTION:模板解析错误:无法绑定到'loc',因为它不是已知的本机属性