Question

有人可以解释一下@Component（{}）中的“模板”是什么意思。例如，我创建了我的组件

@Component({
selector: 'delete'
template: 'What i must write here?. If i write code here, this code will be at view? or i should write code here and the same in view?

我已阅读文档，但无法理解该组件

Answer 1

您传递的HTML定义了Angular2创建的视图应该如何显示为template。或者，您可以将templateUrl传递给应该用于创建视图的HTML文件的路径。

Answer 2

template是您正在创建的组件的html视图。所以我通常喜欢创建两个文件，

myfile.component.ts myfile.component.html

在ts文件中是视图的typescript / javascript逻辑，

在html文件中是视图的html，是要查看的页面。

然后在ts文件的模板字段中指定html文件的路径

.ts文件

@Component({
  templateUrl: './myfile.component.html',
})
export class MyfileComponent {

  constructor() { }

}

.html文件

<div>
My html file is being viewed now!
</div>

您也可以直接从.ts文件中提供html。要做到这一点，您可以使用模板而不是templateUrl，那么您将不需要html文件。

 @Component({
      template: `
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    `
    })
    export class MyfileComponent {

      constructor() { }

    }

注意蜱的位置，它必须像那样格式化。

因此，为了简化多个视图，在我的应用程序中，这是我构建它的方式，

首先查看文件。

file1.component.ts
file1.component.html

第二次查看文件。

file2.component.ts
file2.component.html

等

所以每次我想创建一个新视图时，我都会创建两个新文件。一个用于js逻辑，一个用于html视图。

请记住，每次创建新组件时，都必须在app.module.ts文件和routes文件中注册它。

app.module

//Layouts
import { MyfileComponent }                  from './views/myfile.component';

@NgModule({
    declarations: [
        AppComponent,
        MyfileComponent
    ],
    imports: [
        BrowserModule,
        routing
    ],
    providers: [ 
    Guard,
    Auth,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

路线

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: 'home', component: MyfileComponent, data: { title: 'myfile View' }
];

什么是组件Angular2中的模板

2 个答案: