Javascript 如何在Angular 4中调用新模板?
我有一个显示基本内容的目录组件。目录组件使用的页面模板位于projectname/src/index.html中。index.html是所有新组件使用的默认父模板 我在projectname/src中创建了一个新的main.html,它应该由新组件使用 /src/main.htmlJavascript 如何在Angular 4中调用新模板?,javascript,php,html,angular,Javascript,Php,Html,Angular,我有一个显示基本内容的目录组件。目录组件使用的页面模板位于projectname/src/index.html中。index.html是所有新组件使用的默认父模板 我在projectname/src中创建了一个新的main.html,它应该由新组件使用 /src/main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></tit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</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>
目录/directory.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() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-directory',
templateUrl: './directory.component.html',
styleUrls: ['./directory.component.css']
})
export class DirectoryComponent implements OnInit {
}
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/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</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>
我想让main组件使用src/main.html模板
你知道怎么做吗?谢谢。这不是它的工作原理。无法替换根HTML模板。这一点不会改变。如果在
index.html
中替换app root
组件中的内容,您可以做什么
如果您需要有两个独立的入口点(html文件),我相信您需要创建两个独立的应用程序,并从不同的文件夹为它们提供服务。但是我想不出在什么情况下你会需要做这样的事情。毕竟,它被称为SPA是有原因的…我希望为一个基本网站实现一个单独的模板,为一个用户可以登录和检查记录的基本系统实现一个单独的模板。仅使用1个angular 4应用程序就可以做到这一点吗?您可以使用相同的根HTML来实现这一点。如果你愿意的话,只要在CSS中使用不同的样式就行了。好的。。。我可以使用刀片模板更改laravel中的根html