Блог

Главная - Вопросы по программированию - templateUrl не работает в angular 2

templateUrl не работает в angular 2

#angular

#angular

Вопрос:

У меня есть product-list.component.ts в виде этого:

 import { Component } from '@angular/core'

@Component({
    selector: 'pm-products',
    templateUrl: 'app/products/product-list.component.html'
})

export class ProductListComponent {

}

app.component.ts:

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

import { ProductListComponent } from './products/product-list.component';

@NgModule({
       bootstrap:    [ ],
       imports: [ ProductListComponent],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
       declarations: [AppComponent,ProductListComponent ],

})

@Component({
selector: 'pm-app',
template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <pm-products></pm-products>
    </div>
`
})

   export class AppComponent { 
pageTitle: string = 'Acme Product Management';
}

Я использовал из pm-app в index.html но product-list.component.html не отображается на экране.

заранее спасибо!

Комментарии:

1. вы получаете какую-либо ошибку?

2. вы получаете 404 на консоли?

3. нет, все в порядке! и не выдает мне никакой ошибки.

Ответ №1:

Ваш templateUrl должен быть:

 templateUrl: './app/products/product-list.component.html'

Ответ №2:

Измените свой app.component.ts , как показано ниже :

 import { NgModule, Component } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { ProductListComponent } from './products/product-list.component';

@Component({
  selector: 'pm-app',
  template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <pm-products></pm-products>
    </div>
  `
})

export class AppComponent { 
  pageTitle: string = 'Acme Product Management';
}

@NgModule({
   bootstrap:    [AppComponent ],
   imports: [ BrowserModule ],
   declarations: [AppComponent,ProductListComponent ]
})
export class AppModule {}

Комментарии:

1. спасибо за ваш ответ! но не работает! это означает, что все в порядке! и я не получаю ошибку, но product-list.component не отображается в браузере!

2. получаете ли вы pageTitle значение в браузере?

3. проверьте после изменения templateUrl в ProductListComponent с templateUrl: 'app/products/product-list.component.html на templateUrl: './product-list.component.html

4. Я изменил это! но это то же самое.