Angular2 Özel Durum: 'ngStyle' için bilinen bir yerel özellik olmadığından bağlanılamıyor

Question

Son zamanlarda yeni Angular2 Framework ile çok çalıştım. 'Direktifini: [NgStyle]' eklemek gibi ben birkaç çözümlere geldi hatayı kendisi araştırırken

Can't bind to 'ngStyle' since it isn't a known native property

: özelliklerden bazılarını test ederken ben hata ile sona erdi bileşene, ancak bu değil problemi çöz.

kodu aşağıdaki gibidir:

main.ts

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

bootstrap(App).then(error => console.log(error)); 

app.ts

import { Component } from 'angular2/core'; 
import { Button } from './button'; 
import { NgStyle } from "angular2/common"; 

@Component({ 
    selector: 'app', 
    template: '<h1>My First Angular 2 App</h1><button>Hello World</button>', 
    directives: [Button, NgStyle] 
}) 
export class App { } 

button.ts

import {Component} from "angular2/core"; 
import {NgStyle} from "angular2/common"; 

@Component({ 
    selector: 'button', 
    host: { 
     '[ngStyle]': 'style()' 
    }, 
    templateUrl: '<ng-content></ng-content>', 
    directives: [NgStyle] 
}) 
export class Button { 
    style() { 
     return { 
      'background': 'red' 
     } 
    } 
} 

Yardımlarınız için teşekkür ederiz.

Answer 1

Lütfen dikkat, bu soruyu yazarken bir çözüm buldum. Ve bunu paylaşmayı seviyorum, böylece diğer insanların bir sonsuzluk aramak zorunda kalmamaları.

aşağıdaki bağlantıyı bir göz atın lütfen: 'Günter Zochbauer' ifade ettiği gibi

Angular2 Exception: ngClass within a Host, "isn't a known native property"

, konak bağlantılarında direktifleri kullanmak mümkün değildir. Ve ngClass için bir çözüm ile geliyor. Düz nesneyi 'derleme' ederken olmadığı için bu mükemmel bir çözüm olmadığını,

button.ts

import {Component} from "angular2/core"; 
import {NgStyle} from "angular2/common"; 

@Component({ 
    selector: 'button', 
    host: { 
     '[style]': 'styleAsString()' 
    }, 
    templateUrl: 'app/button.html', 
    directives: [NgStyle] 
}) 
export class Button { 
    styleAsString() { 
     let style = { 
      background: 'red' 
     }; 

     return JSON.stringify(style).replace('{', '').replace('}', '').replace(/"/g, ''); 
    } 
} 

Not:

Ve burada basit benim sorun için çözüm css. Ben sadece '"' kullanılırken garip bir davranış sonuçlanan tüm tekrarlarını değiştirmek ', (") url" ...'. Hope i aynı ya da benzer bir soru ile birilerini yardımcı olacağı belirtilmiştir.

Answer 2

Eğer ev sahibi size Renderer sağlar

@Component({ ... }) 
export class SomeComponent { 
    constructor(private renderer:Renderer, private elementRef:ElementRef) {} 
    someMethod() { 
    this.renderer.setElementClass(
     this.elementRef.nativeElement, this.getClassFromSomewhere()); 
    this.renderer.setElementStyle(
     this.element.nativeElement, 'background-color', this.getColor()); 
    } 
} 

veya diğer yöntemlerle gibi zorunlu yolları kullanmaya gerek

host: { 
    '[class.someName]':'someValue', 
    '[style.someProp]':'someValue' 
} 

sağladıklarını üzerinde tam bir esneklik, gerekiyorsa.

Answer 3

CommonModule modülünü almadığınızda bu gerçekleşir. Angular'ın son versiyonunda, tüm DOM seviyesi yönergeleri aynı modül altında gruplandırılmıştır.

import { CommonModule } from '@angular/common';

Sen yönlendirici üzerinden erişilebilir birden çok bileşenden aynı kullanılarak sonuna kadar eğer NgClass veya NgStyle bireysel fakat Açısal yakında bir hata atar alabilirsiniz.