Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/424.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在Angular 4中调用新模板?_Javascript_Php_Html_Angular - Fatal编程技术网

Javascript 如何在Angular 4中调用新模板?

Javascript 如何在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

我有一个显示基本内容的目录组件。目录组件使用的页面模板位于projectname/src/index.html中。index.html是所有新组件使用的默认父模板

我在projectname/src中创建了一个新的main.html,它应该由新组件使用

/src/main.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>
目录/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