angular2-directives

问题 I'm stuck on how to access and change an inputs ngModel value using a directive. The outcome of the issue is that the model's address value doesn't update when I select the desired address...it's just set to what I actually typed into the input, rather than final value of the input. I type '830': I select '8300 Fauntleroy Way Southwest, Seattle, WA, United States': Resulting value: { address: '830' } Desired value: { address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States' } In

问题 I have simplest Angular structural directive: import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[hello]' }) export class HelloDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { this.viewContainer.createEmbeddedView(this.templateRef); } } I use it this way: <div *hello>Hello Directive</div> It shows me "Hello Directive" message as expected. Now I want to change the content by wrapping it

问题 In angular 1.x, we could reference the parent controller by requiring this inside a directive. However, with the whole naming switch-over in angular 2, I cannot really seem to find an equivalent of that functionality? Things I have tried so far: One way that I see is to @input the parent into the child, but that seems a little bit much. Another way that I saw was using services, but this gave me certain fear, as, to my knowledge, a service is still a singleton, so other components could now

问题 I am trying to implement a custom drag and drop directive. It works, but it is extremely slow, and I think the slowness can be tracked to Angular 2 because I've never encountered this slowness before. The slowness only occurs when I attach an event listener to the dragover or drag events (i.e. the events which are sent frequently), even if I do nothing but return false in them. Here's my directive code: import {Directive, ElementRef, Inject, Injectable} from 'angular2/core'; declare var

问题 I have a div which is like <div [ngClass]="{'active' : isActive} [ngStyle]={top: topVar } > isActive and topVar are calculated based on the view, (like if the content overflowed, and the content is dynamic). so I calculate them in ngAfterViewChecked. which ofcourse gives me this error : Expression has changed after it was checked, previous value : "undefined". current value : '636px'. I understand what I did wrong, my question is, how to do it right? (If I calculate the the vars based on the

问题 How can I use ViewChild in Angular 2 Javascript? I have referred angular.io docs and I have tried with the following code and it is not working. Can anyone help me? Thanks in advance. main.html <router-outlet></router-outlet> app.component.js (function (app) { app.AppComponent = ng.core .Component({ selector: 'my-app', templateUrl: 'app/views/main.html', directives: [ng.router.ROUTER_DIRECTIVES], //<----not loading components here viewProviders: [ng.http.HTTP_PROVIDERS], queries: {

问题 I am trying to change the filter logic in angular datatable export class FilterPipe implements PipeTransform { keys = []; transform(items: any, args: string): any { console.log('Datatable test'); if (items != null && items.length > 0) { let ans = []; if (this.keys.length == 0) { this.keys = Object.keys(items[0]); } for (let i of items) { for (let k of this.keys) { if (String(i[k]).toLowerCase().indexOf(args.toLowerCase()) >= 0) { ans.push(i); break; } } } return ans; } } } I kept a console

问题 I am working in angular2 vs typescript. In my app.component.ts file i have to load the script files on demand based current navigator language. So i have added my function like below(home.component.ts), export class HomeComponent { constructor() { this.loadDynmicallyScript(); } public loadDynmicallyScript() { let node = document.createElement('script'); node.src = "../node_modules/xxxxxxxxxx/xx." + navigator.language"+".min.js"; node.type = 'text/javascript'; document.getElementsByTagName(

问题 Well, I have created a function inside the component.ts file which is placed inside the constructor: constructor(private _visitService: VisitService,) { this._visitService.getchartData().subscribe(data => { this.fetchedData = data console.log("INSIDE SUBSCRIBE", this.fetchedData ); }); } It is fine when the data is to be used within the subscribe curly brackets {} like the console.log did. but when i put it in a function outside like this: constructor( private _visitService: VisitService, ) {

问题 My case, I'm performing ngFor over ES6 collections that get filtered through pipe and converted into array, but when collection contains over 5000 elements ui starts acting sluggy, trivial performance profiling shown that creating large array per every dirty check is overkill, while iteration itself is fast. So I would like to implement my own ngFor directive that would be capable of iterating through ES6 iterables. It was simple in Angular 1, but it doesn't seem as easy in Angular 2, where