templateUrl undefined geben, wenn die Klasse Eigenschaften beziehen

Question

Während nach dem Tutorial für Formulare bei https://angular.io/docs/ts/latest/guide/forms.html

ich nicht definiert Fehler immer behalten, wenn auf eine der Eigenschaften beziehen, die so lange in den .ts definiert Datei als ich templateUrl und eine seperate .html

Wenn ich die gleiche html und Platz in der .ts-Datei innerhalb `` in Vorlage alles funktioniert gut.

Also meine Frage ist: Muss die templateURl Datei irgendwie Umfang definieren? Das Tutorial scheint nichts darüber zu sagen und ich nahm an, dass es Zugriff auf die Komponentenvariablen erhalten würde, die es aufgerufen haben.

import { Component } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 

import { Guitar } from './guitar'; 

@Component({ 
    selector: 'guitar-form', 
// template: ` 
// <div class="container"> 
// <h1>Guitar Form</h1> 
// <form> 
//  <div class="form-group"> 
//  <label for="brand">Brand</label> 
//  <select class="form-control" required 
//     [(ngModel)]="testmodel.brand" name="brand"> 
//   <option *ngFor="let b of brands" [value]="b">{{b}}</option> 
//  </select> 
//  TODO: remove this: {{testmodel.brand}} 
//  </div> 

//  <div class="form-group"> 
//  <label for="model">Model</label> 
//  <input type="text" class="form-control" required 
//   [(ngModel)]="testmodel.model" name="model"> 
//   TODO: remove this: {{testmodel.model}} 
//  </div> 

//  <div class="form-group"> 
//  <label for="color">Color</label> 
//  <input type="text" class="form-control" 
//    [(ngModel)]="testmodel.color" name="color"> 
//     TODO: remove this: {{testmodel.color}} 
//  </div> 

//  <button type="submit" class="btn btn-default">Submit</button> 
// </form> 
// </div> 
// ` 
    templateUrl: 'app/guitar-form.component.html' 
}) 
export class GuitarFormComponent { 

    brands = ['Fender', 'Gibson', 'Guild', 'Jackson', 'Epiphone', 'Charvel']; 

    testmodel = new Guitar(69, this.brands[0], 'Stratocaster', 'Black'); 

    submitted = false; 

    onSubmit() { this.submitted = true; } 

    // TODO: remove this when we're done 
    get diagnostic() { return JSON.stringify(this.model); } 
} 

Lustig, die undefinierte verschwunden, als ich es bemerkte, so konnte ich zeigen, aber ironischerweise die Diagnose nicht mehr funktioniert, wenn sie in dem HTML-Code platziert, und dies war der einzige Aspekt, der früher arbeitet. Ich habe Konnektivität auf individueller Basis verifizierter ...

<div class="container"> 
    <h1>Guitar Form</h1> 
    <form> 
    {{ diagnostic }} 
    <div class="form-group"> 
     <label for="brand">Brand</label> 
     <select class="form-control" required 
       [(ngModel)]="testmodel.brand" name="brand"> 
     <option *ngFor="let b of brands" [value]="b">{{b}}</option> 

     </select> 
       {{ testmodel.brand }} 
    </div> 

    <div class="form-group"> 
     <label for="model">Model</label> 
     <input type="text" class="form-control" required 
     [(ngModel)]="testmodel.model" name="model"> 
     TODO: remove this: {{testmodel.model}} --> 
    </div> 

    <div class="form-group"> 
     <label for="color">Color</label> 
     <input type="text" class="form-control" 
     [(ngModel)]="testmodel.color" name="color"> 
     {{ testmodel.color }} 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

Answer 1

Ich glaube, Sie

moduleId: module.id, 

zum @Component({...}) Dekorateur hinzufügen müssen.

Siehe auch Angular2 - What is the meanings of module.id in component?