app.component.htmlがレンダリングされないのはなぜですか？

-1

私は次の角度を持っています。plnkr.co：https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview。app.component.htmlがレンダリングされないのはなぜですか？

//app.component.ts

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

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { name = 'Angular'; }

//app.component.html

testing... 
<router-outlet></router-outlet>

ブラウザでoputputは次のとおりです。

Loading AppComponent content here ...

なぜありませんapp.component.htmlファイルが表示されますか？それとも別の問題ですか？

出典

2017-12-09 4thSpace

を以下のコードを記述してください。このようにしてみてください。

は線の下にあなたのapp.moduleを追加します。 t

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

@NgModule({ 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
})

plnkr demo

出典

2017-12-09 05:05:28 Chandru

それは動作しますが、なぜそれが必要ですか？私のファイルには名前にハイフンがありません。 – 4thSpace

スキーマ：カスタムHTMLタグを使用している各コンポーネントに[CUSTOM_ELEMENTS_SCHEMA]を追加する必要があります。 – Chandru

私は参照してください。 app-rootを使用すると、CUSTOM_ELEMENTS_SCHEMAを削除できます。 – 4thSpace

app.component.ts

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

    @Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
    title = 'app'; 
    } 
    app.component.html 
    <router-outlet></router-outlet>

のindex.htmlに

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Myapp</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    </head> 
    <body> 
    <app-root></app-root> 
    </body> 
    </html>

出典

2017-12-09 04:58:12

がどのように変化するん：

import {Component, NgModule} from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; @Component({ selector: 'x', templateUrl: './route.html' }) export class X{ } const routes1: Routes = [ {path : '', redirectTo: '/x', pathMatch: 'full'}, {path : 'x', component: X} ] @NgModule({ imports: [ RouterModule.forRoot(routes1) ], exports: [RouterModule] }) export class AppRoutingModule{ }

以下のあなたの条件に非常に近い作業例を見つけてください。セレクタは何か違いはありますか？また、私はapp.component.htmlを使っています。 index.htmlではありません。 – 4thSpace

あなたのapp.component.htmlには<router-outlet></router-outlet>が含まれていますが、子ルートは定義されていません。これが問題の原因です。

この問題を解決するには、app.component.htmlからrouter-outletを削除するか、app.router.tsにchild route configを定義する必要があります。

実施例：configおよび子のルートをルーティングについての詳細を読むためにhttps://plnkr.co/edit/wbW1s8PqDtu35GR8HC8D?p=preview

訪問Angular Guide for routes。

出典

2017-12-09 05:25:30 akashpandey

app.router.tsが表示されません。また、そこに含まれていないroute.htmlもインクルードします。なぜ単にapp.component.htmlを使用しないのですか？ – 4thSpace

ここでは正しいルーティング実装が不足していたため、いくつかのエラーがコンソールに表示されています。

app.component.html：

testing... 
<div routeLink="x" routerLinkActive="active"> 
    Click 
</div> 
<router-outlet></router-outlet>

app.route.ts： https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview

出典

2017-12-09 06:57:02 ashiwn

これはHTML出力で表示されます：「ここにAppComponentコンテンツを読み込んでいます...」 – 4thSpace

app.component.htmlがレンダリングされないのはなぜですか？

答えて

関連する問題