Question

我对这个角度6很陌生。这可能很愚蠢，但是我想阐明我的概念。下面是我的appComponent打字稿的代码

   import { Component, OnInit, Inject } from '@angular/core';
import {ToastrService} from './services/toastr.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [],
  providers:[ToastrService]
})
export class AppComponent  {
  }

当我以以下格式将<app-root>放在index.html中时。效果很好。

 <html>

    <body>
            <app-root></app-root>
    </body>
</html>

但是当我删除html和body标签时，它只会给我下面的错误。

main.ts:12 Error: The selector "app-root" did not match any elements
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1073)
    at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement (animations.js:229)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:20837)
    at createElement (core.js:17499)
    at createViewNodes (core.js:19737)
    at createRootView (core.js:19690)
    at callWithDebugContext (core.js:20722)
    at Object.debugCreateRootView [as createRootView] (core.js:20208)
    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:18029)
    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create

所以我的问题是..我是否必须始终在HTML或正文标记中编写<app-root>？还是有其他方法可以用HTML或body标签写出<app-root>呢？

谢谢

Answer 1

是的，async始终以html或body标记显示，只要您要显示private async saveContent(homeItemsResponse: any[]): any { try { if (homeItemsResponse) { let i = 0; for (const playlistCategoriesItem: any of homeItemsResponse) { const homeContent: any = Home.homeContentItems.items[0].content.items; homeContent.push({ name: playlistCategoriesItem.name, content: { items: [] } }); const playlistContent: any = playlistCategoriesItem.content.items; for (const playlistItem: any of playlistContent) { const homePlaylistItems: any = Home.homeContentItems.items[0].content.items[i].content.items; homePlaylistItems.push({ id: playlistItem.id, name: playlistItem.name, type: playlistItem.type, trackItems: [], }); const playlistId: string = playlistItem.id; const response: any = await this.getPlaylistTracks(playlistId); for (const item: any of response.items) { homePlaylistItems.trackItems.push(item); } } i++; } } } catch (error) { this.logger.info(`@@@@ Home - Error on saveHomeContent: ${error}`); } }模块即可。

<app-root>体系结构是模块化的，即已将视图划分为多个可重用组件，其中

<app-root>

因此，这是父模块，其中包含app.module.ts及其对应的Angular2+文件。

Index.html是第一页，其加载与在包含template(.html) is view .ts is considered to be controller for business logic.标记的html页面中一样简单。

index.html

.ts,.html,.css,.spec

index.html

<html>,<head>,<body>

app.component.ts

The page which first loads and contain <html>,<head>,<body> tags.

app.module.ts

<html>
<head>
<script></script>
<link></link>
</head>
<body>
Hello world.

<app-root></app-root>  <--- where whole module loads-- Root selctor
</body>
</html>

为什么<app-root>不是没有body标签的已知元素

1 个答案:

index.html

index.html

app.component.ts

app.module.ts