angular2-template

问题 I want to start playing a HTML video programmatically from TypeScript when the User clicks on the Video area itself. This is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource}}" type="video/mp4" /> Browser not supported </video> </div> This is my TypeScript code: @ViewChild('videoPlayer') videoplayer: any; toggleVideo(event: any) { this.videoplayer.play(); } The issue is that I get an error that says play() function is not

问题 I have a component that fetches list of items from server and then display that list using *ngFor in template. I want the list to be displayed with some animation, but one after other. I mean each list item should animate in after other. I am trying something like this: import { Component, Input, trigger, state, animate, transition, style } from '@angular/core'; @Component({ selector: 'list-item', template: ` <li @flyInOut="'in'">{{item}}</li>`, animations: [ trigger('flyInOut', [ state('in',

问题 Current Situation: I have a parent and a child component. The parent initializes the child 's data using its @Input . And the child notifies the parent, when the user edited the data using the @Output . And because the data is immutable , the child has to send the data along with that notification. When the parent got notified, it will check if the submitted data is valid, and then will set it (this will propagate the new value to some other child components as well). The Problem: When

问题 Here is an template example: <span count="{{currentCount}}"></span> <span [count]="currentCount"></span> Here both of them does the same thing. Which one is preferred and why? 回答1: [] is for binding from a value in the parent component to an @Input() in the child component. It allows to pass objects. {{}} is for binding strings in properties and HTML like <div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div> where the binding can be part of a string. () is for binding an event handler to be

问题 How can I render an expression inside an [innerHTML] directive: public stringInterpolation: string = 'title'; public data: any = '<a>{{stringInterpolation}}</a>'; <div [innerHTML]="data"></div> String interpolation is being rendered as text not the exact value. Logic behind this is I am using a reusable table and I want a configuration where in I can specify a template that will be generated inside a cell rather than listing all data as text. 回答1: You can use TypeScript interpolation. Angular

问题 I've read this question about how to determine the active route, but still it's not clear to me how to determine an active route with paramaters? Right now I'm doing it like this: <a [routerLink]="['/Profile/Feed', {username: username}]" [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}"> Feed for {{username}} </a> And inside my component: getLinkStyle(path:string):boolean { console.log(this._location.path()); // logs: '/profile/john_doe/feed' return this._location.path() === path;

问题 This question already has answers here : how to change page title in angular2 router (13 answers) Closed 3 years ago . I'm working my way through the Angular 2 documentation on routing. I have a sample application which shows two components which are routed and hooked up to navigation links. Here is a Plunker demonstrating the behaviour. It's built using Angular 2 in Typescript. Here is the main 'app.component.ts' code: import {Component} from 'angular2/core'; import {RouteConfig, ROUTER

问题 I sometimes have a component that can receive text like this: text www.website.com But I would like to convert it to a url if it is a link. Like this. text www.website.com I read this SO answer that suggests using 3rd party libs such as anchorme. Is there anywway to do it the angular2 way? 回答1: There are numerous problems with using simple regexes to modify HTML content. Here's an approach that uses the linkifyjs module, which you need to npm install . Do notice that the input is considered

问题 I have the following HTML but i get the the exception. How to fix it ? Parser Error: Got interpolation ({{}}) where expression was expected at column 48 in [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)] <div class="form-group"> <label class="form-control-label" for="field_exportExpression">exportExpression</label> <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item

问题 @Component({ selector: 'bancaComponent', templateUrl: '{{str}}' }) export class BancaComponent implements OnInit { str: String; constructor(private http: Http) { } ngOnInit(): void { this.str = "./file.component.html"; } Is there another way to make it ? Thanks :) 回答1: Try this solution : import { Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef, ViewContainerRef, AfterViewInit, OnInit } from '@angular/core'; @Component({ selector: 'bancaComponent', template: ` <ng