angular2-directives

问题 Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean here is parent component: @Component({ selector : 'parent-component', directives : [child], template : ` <h1 class= "text-center">ToDo App</h1> <div class = "form-group"> <lable>Task</lable> <input type = "text" class = "form-control" #task> <lable>Detail<

问题 Is there a way to dynamically set the value of the *ngTemplateOutlet directive? Something along those lines: <div *ngFor="let item of [ 'div', 'span' ]"> <ng-container *ngTemplateOutlet="{{ item }}"></ng-container> </div> <ng-template #div> <div>some text inside a div</div> </ng-template> <ng-template #span> <span>some text inside a span</span> </ng-template> Of course it doesn't work but I guess it explains quite well what I'm trying to achieve: if the item is "div", then it should display

问题 Is there a way to dynamically set the value of the *ngTemplateOutlet directive? Something along those lines: <div *ngFor="let item of [ 'div', 'span' ]"> <ng-container *ngTemplateOutlet="{{ item }}"></ng-container> </div> <ng-template #div> <div>some text inside a div</div> </ng-template> <ng-template #span> <span>some text inside a span</span> </ng-template> Of course it doesn't work but I guess it explains quite well what I'm trying to achieve: if the item is "div", then it should display

问题 I am using a directive on an <input> -element and get a reference to its controls like this: @ContentChild(NgControl) private readonly _inputNgControl: NgControl; But when I listen to model-changes like so: ngAfterContentInit(): void { this._inputNgControl.control.valueChanges .distinctUntilChanged() .subscribe(value => { // ... }); } it appears that this._inputNgControl.control refers not to the input that the directive is sitting on, but to ALL inputs in my parent component (which contains

问题 I have a component which features a set of 3 custom buttons and I want to use these buttons as controls for a sound recorder. I got stuck in the first phase, where I want to change the symbols displayed on the buttons, according to their function. I tried to achieve that by changing their xlink:href attributes(I use svg), but got this in he console EXCEPTION: Error in ./RecordComponent class RecordComponent - inline template:5:45 caused by: this.roundButtonOne.getAttribute is not a function .

问题 I'm wanting to setup a string property on a component in my constructor, but when I try something like this @Component({ selector: 'wg-app', templateUrl: 'templates/html/wg-app.html' }) export class AppComponent { constructor(private state:string = 'joining'){ } } I get a DI Exception EXCEPTION: No provider for String! (AppComponent -> String) Clearly, the injector is trying to find a 'string' provider, and can't find any. What sort of pattern should I be using for this type of thing? Eg.

问题 What is the best practice to check if user has scrolled to the bottom of the page in Angular2 without jQuery? Do I have access to the window in my app component? If not should i check for scrolling to the bottom of the footer component, and how would I do that? A directive on the footer component? Has anyone accomplished this? 回答1: // You can use this. @HostListener("window:scroll", []) onScroll(): void { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at

问题 How can one create an element directive in angular 6? I see how to create an attribute directive, but what if I want to create a custom element? @Directive({ selector: '[appCards]'//you can't do something like -- element: name }) export class CardsDirective { constructor(el: ElementRef) { } } 回答1: I tried creating a Directive with Selector as and it works. Angular is so powerful. import {Directive, ElementRef, Input} from '@angular/core'; @Directive({ selector: '<appCards>' }) export class

问题 How can I prevent default the routing in angular 2? In router subscribe , I get only the path name. I am not getting event in it. Is there any other service provider in angular 2 to get the route change event? app.component.js (function (app) { app.AppComponent = ng.core .Component({ selector: 'my-app', templateUrl: 'app/views/main.html', directives: [ng.router.ROUTER_DIRECTIVES], viewProviders: [ng.http.HTTP_PROVIDERS] }) .Class({ constructor: [ng.router.Router, ng.http.Http, function

问题 I have quite complex infrastructure in my project which contains of host component structural directive used in host component's template (MyDir) another component used in structural directive (MyComp) host component @Component({ selector: 'my-app', template: ` <table> <tr *myDir="let item of data"> <td>{{item.text}}</td> </tr> </table>` }) export class AppComponent { data = [ { text: 'item 1' }, { text: 'item 2' } ]; } structural directive import { MyComp } from './myComp'; @Directive({