Angular2 Richtlinie nicht arbeiten außerhalb Komponente

ich eine angular2 Richtlinie haben wie folgt:Angular2 Richtlinie nicht arbeiten außerhalb Komponente

import { DOM } from 'angular2/src/platform/dom/dom_adapter'; 
import {Directive, ElementRef, Renderer} from 'angular2/core' 

@Directive({ 
    selector: '[headerBG]', 
    host: { 
     '(click)': 'onClick()' 
    } 
}) 
export class HeaderBGDirective { 

    constructor(private el: ElementRef, private renderer: Renderer) { 
    } 
    onClick() { 
     console.log(1234); 
    } 
}

Wenn ich das Element Körper anwenden: <body headerBG>, funktioniert es nicht,

aber wenn ich setzen es innerhalb einer anderen Komponente funktioniert es gut:

@Component({ selector: 'courses', template: `<h2> {{title}} <input type='text' headerBG/> </h2> <ul> <li *ngFor="#course of courses"> {{course}} </li> </ul> `, providers: [CourseService], directives: [HeaderBGDirective] })

Ist das das richtige Verhalten oder fehlen mir einige Ding? Wie wenden Sie die Richtlinie auf das Körper Element an, ohne es zu einer Komponente zu machen? Dank

EDIT

import {Component} from 'angular2/core'; import {HeaderComponent} from 'modules/shared/directives/header.component'; import {HeaderBGDirective} from 'modules/shared/directives/headerBG.directive'; @Component({ selector: 'body', templateUrl: './welcome/templates/welcome.html', directives: [HeaderComponent, HeaderBGDirective] }) export class AppComponent { post = { title: 'Favorite', isFavorite: true } }

in welcome.html: <sc-header></sc-header><div>some content</div>

Quelle

2016-05-21 me_digvijay

Angular Richtlinien sollen nicht außerhalb Komponenten verwendet werden. Die Wurzel einer Angular2 Anwendung ist eine Komponente von instanziierten

bootstrap(AppComponent)

Andere Komponenten und Richtlinien arbeiten nur innerhalb eines solchen Wurzelkomponente oder Nachkomme Komponenten dieser Wurzelkomponente.

Quelle

2016-05-21 16:46:40

Danke. Also, sieht so aus, als müsste ich die App auf "body" hochladen, aber es scheint ein begrenzender Punkt von Angular2 für mich zu sein. –

Bedeutet das, dass ich niemals eine Direktive in "body" -Tag setzen kann, da die root-app irgendwo enthalten sein sollte (was ich denke, sollte Körper sein). Oder kann ich etwas tun, wie folgt aus: ' '. Und dann "body" in die "my-app" stellen? –

Es gibt einige Einschränkungen im Vergleich zu Angular1. Bei Angular2 geht es um Performance und sie mussten Kompromisse eingehen. –

Ich denke, das ist ein Bootstrapping-Problem. Beim Bootstrapping von Winkel 2 geben Sie die Anwendungskomponente

im folgenden Beispiel aus https://github.com/johnpapa/angular2-tour-of-heroes/blob/master/app/main.ts, AppComponent als Selektor my-app an. So findet es das Element, das dem Selektor entspricht und nur auf dieses Element (und seine Nachkommen) beschränkt ist.

import { bootstrap } from 'angular2/platform/browser'; 
import { AppComponent } from './app.component'; 

bootstrap(AppComponent);

So Ihre Anwendungskomponente müssten einen Wähler von body haben für diese zu arbeiten. Es könnte Probleme mit der Auswahl body geben, aber ich habe es nicht versucht, um sicher zu wissen.

Quelle

2016-05-21 16:49:46 pgreen2

'Körper' als Selektor funktioniert gut. –

Angular2 Richtlinie nicht arbeiten außerhalb Komponente

Antwort

Verwandte Themen