标签: angular2-template

我正在尝试使用下面的代码获取自定义编写组件的子组件：

@Component({
  selector: 'custom-comp',
  templateUrl: '<div class='child1'></div><div class='child2'></div>',
  styleUrls: ['./custom-comp.component.scss']
})
@Component({
      selector: 'comp',
      templateUrl: '<#custom-comp custom-comp></custom-comp>',
      styleUrls: ['./custom-comp.component.scss']
    })

@ViewChild('custom-comp') custom-comp: ElementRef;
ngOnInit(){
    console.log(this.custom-comp.nativeElement.children);
}

它返回此错误：无法读取未定义的属性“子级”

结论是这种方法仅适用于本机 HTML 元素，我如何为自定义组件做到这一点？谢谢 ！

Webstorm 为 Angular 模板提供语法突出显示选项，其中之一称为“复数表达式”。

正如你从屏幕截图中看到的，它有一组花括号，逗号有特殊的含义，以及其他我在 Angular 模板语法中从未见过的奇怪之处。

这是什么？

我面临着Angular2路由器和异步管道的问题.

我试图渲染一个RxJs Observable,数据不会自动渲染.

必须单击链接以获取要呈现的数据的路径.

这是根应用程序:

import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);

这是根组件:

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',
    providers: [AppService, FirstComponent, SecondComponent],
    directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
    template: `<h1>An Angular 2 App</h1>
               <a [routerLink]="['First']">first-default</a> 
               <a [routerLink]="['Second']">second</a> 
               <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
    {path: '/second', name: …

首先,如果这是一个可怕的设计,我很乐意改变.

在我index.html的身体中,有:

<month [year]="2016" [monthOfYear]="4">Loading...</month>

month.component.ts 那么:

import { Component, Input, OnInit } from '@angular/core';
import { DayComponent } from '../day/day.component';
import * as Models from '../../../models/_models';

@Component({  
  selector: 'month',
  moduleId: module.id,
  templateUrl: 'month.component.html',
  styleUrls: ['month.component.css'],
  directives: [DayComponent]
})

export class MonthComponent {  
  name: string;
  days: Models.Day[];
  @Input('year') year: number;
  @Input('monthOfYear') monthOfYear: number;
  month: Models.Month;

  ngOnInit() {
    this.month = new Models.Month(this.year, this.monthOfYear);
    this.name = this.month.getMonthName();
    this.days = this.month.days;
  }
}

...... ngOnInit()并被正确地称呼.然而,在调用(或许永远,但我不知道如何来确定),两者的时间year和monthOfYear是undefined …

当我启动我的Angular 2应用程序时,应用程序始终处于加载阶段.

在chrome dev控制台中,我可以看到以下内容:

 Error: (SystemJS) core_1.InjectionToken is not a constructor
    TypeError: core_1.InjectionToken is not a constructor
        at Object.eval (http://localhost:3000/node_modules/ng-pick-datetime/lib/translations.js:9:24)

我的设置是:

@angular/cli: 1.0.0
node: 7.8.0
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.0.2
@angular/upgrade: 2.4.10
@angular/cli: 1.0.0

所以这是我的主要组件,其中包含标题,侧边栏和内容

<md-sidenav-container>

  <app-navigation></app-navigation>
  <app-header></app-header>


  <div class="app-content app-content-layout">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-container>

app-header只包含一个基本的md-toolbar视图,其中包含一个用于切换侧边栏的按钮

<md-toolbar>
  <button class="app-icon-button-toggle" (click)="navToggle()">
    <i class="material-icons app-toolbar-menu">menu</i>
  </button>
<md-toolbar>

这是逻辑或app-header的组件

export class HeaderComponent implements OnInit {

  @Output() toggleSideNav = new EventEmitter<boolean>();
  navToggle() {
    this.toggleSideNav.emit(true);
  }
}

然后我试试这个

<app-navigation></app-navigation>
<app-header (navToggle)="app-navigation.toggle()"></app-header>

当然它不起作用导致它的愚蠢,但我不知道该怎么做.这是我遵循的参考.https://github.com/angular/material2/issues/2936

所以基本上md-sidenav是位于app-navigation组件.我想切换md-sidenav使用app-header组件.我用的是@Output,EventEmitter但它不起作用.相信我,我做了一切工作,我也使用服务方法.

//这是shared.service

@Injectable()
export class SharedService{
    public sidenav: any;

}

//这是使用Service方法的app-header components interactions.

template: '<button class="app-icon-button-toggle" (click)="toggleNav()">
               <i class="material-icons app-toolbar-menu">menu</i>
           </button>';

export …

在Angular 2中,我得到了一个项目列表,并根据给定的条件(即基于位置编号)我设置列表重复.

我需要为每个位置的第一个框隐藏" 删除文本 ".

Plunker: https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN ？p = preview:

[1]: https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN?p=preview

import {Component} from '@angular/core';

@Component({
	selector: 'app',
	template: `
	  
    <ul *ngFor="let locdata of locations">
   
     <template ngFor let-item [ngForOf]="items"; let-i=index>
          <div *ngIf="item.location==locdata.location">
             <div class="title"> location  {{ item.location}} <span  *ngIf="isNotFirst(item)">  remove </span> </div>
          <div class="container"> {{ item.sedule}}</div>
       </div>
      </template>
	  </ul>
	 
	`
})
export class App {
  items: string[];
  
   isNotFirst(item: any) {
      return this.items.filter(i => i.location === item.location).map(i => i.id).indexOf(item.id) !== 0;
    }
  
  locations:any;
  
  constructor() {
    this.locations=[{location:1},{location:2},{location:3}]; …

我只想在有价值的情况下有条件地显示链接，并且不确定如何检查。我正在进行API调用，并使用该值填充数据。我尝试使用ngIf进行过滤， <a href="{{profil.FacebookUrl}}" *ngIf="profile.FacebookUrl != '' && profile.FacebookUrl != 'null' && profile.FacebookUrl != 'undefined'"</a> 但似乎都无法正常工作，但我仍然看到数据。

我在工具提示中显示了一组数据,所以我使用了一个模板.我的代码看起来像:

<ng-template #ToolTipTemplate>
    <small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>

<span [ngbTooltip]="ToolTipTemplate">Months: {{data.months.length}}</span>

如果data.months为空,我不希望出现工具提示.目前,如果它为空,则仅显示工具提示箭头.

我试着添加*ngIf在<small>模板内标签,但没有奏效.我也尝试添加*ngIf到<ng-template>无济于事.

我刚从角度5更新到角度6,我面临角度动画的问题.

我做了标准升级

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli --migrate-only --from=1.7.4
ng update @angular/core
npm install rxjs-compat (most project probably need this)
ng serve

我还根据官方升级指南(https://update.angular.io/)从5.2到6 更新了我的代码库,但是有一个错误,我无法弄清楚.

ERROR in src/app/dispute-center/shared/services/dispute-store-service.ts(1,22): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'transition'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,28): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'trigger'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,37): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'state'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,44): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'style'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,51): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no …