Angular 4で新しいテンプレートを呼び出す方法は？

私はディレクトリ基本的な内容を表示するコンポーネントがあります。 ディレクトリコンポーネントによって使用されるページテンプレートは、projectname/src/index.htmlにあります。 index.htmlは、すべての新しいコンポーネントで使用されるデフォルトの親テンプレートです。Angular 4で新しいテンプレートを呼び出す方法は？

私は新しいコンポーネント

/src/main.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 

    </body> 
</html>

メイン/メインで使用することを想定しているプロジェクト名/ srcの中に新しいmain.htmlとを作成.component.ts

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

@Component({ 
    selector: 'app-main', 
    templateUrl: './main.component.html', 
    styleUrls: ['./main.component.css'] 
}) 
export class MainComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

}

ディレクトリ/ directory.component.ts

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

@Component({ 
    selector: 'app-directory', 
    templateUrl: './directory.component.html', 
    styleUrls: ['./directory.component.css'] 
}) 
export class DirectoryComponent implements OnInit { 

}

のsrc/index.htmlを

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

</head> 
<body> 
    <app-root>Loading...</app-root> 
</body> 
</html>

のsrc/main.htmlを

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>MyAngularApp</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> 

</body> 
</html>

のsrc /アプリ/アプリ.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { DirectoryComponent } from './directory/directory.component'; 
import { RouterModule, Routes } from "@angular/router"; 

import 'rxjs/Rx'; 
import { MainComponent } from './main/main.component'; 

// Each route is an object 
export const APP_ROUTES: Routes = [ 
    //{ path: '', component: MainComponent }, 
    { path: 'homedev', component: HomedevComponent }, 
    { path: 'directory', component: DirectoryComponent }, 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    DirectoryComponent, 
    MainComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(APP_ROUTES) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

メインコンポーネントはsrc/main.htmlテンプレートを使用します。

どうすればいいですか？ありがとう。

出典

2017-06-21 Conan Carroll

これは機能しません。ルートHTMLテンプレートを置き換えることはできません。それは変わらない。 index.htmlのapp-rootコンポーネント内のものを置き換える場合はどうすればよいですか。

2つのエントリポイント（htmlファイル）が必要な場合は、別々のアプリケーションを2つ作成して、それぞれ異なるフォルダから提供する必要があると思います。しかし、私はあなたがこれのような何かをする必要がある状況を考えることはできません。結局のところ、それは理由のためにSPAと呼ばれています...

出典

2017-06-21 06:39:56

私は基本的なWebサイトとユーザーがログインしてレコードを確認できる基本的なシステムのための別のテンプレートのための別のテンプレートを実現したいと考えていました。ちょうど1つの角4アプリでこれも可能ですか？ –

同じルートHTMLを使用することができます。そうしたい場合は、CSSでスタイルを違うようにするだけです。 –

大丈夫...ブレードテンプレートを使用してlaravelのルートHTMLを変更できます –

Angular 4で新しいテンプレートを呼び出す方法は？

答えて

関連する問題