0
私はangular5を使用してアプリケーションを作成しています。他のコンポーネントをレンダリングする必要がある（そのURLにリダイレクトされるはずですが）URLの変更だけをクリックすると、ホームページにアンカータグが表示されます。ノード/エクスプレスアングル5ルーティング
必須コードは次のとおりです。
APP-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { TestComponent } from '../test/test.component';
const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: 'Test', component: TestComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
app.component.ts
import { Component } from '@angular/core';
// Import the DataService
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Define a users property to hold our user data
employees: Array<any>;
// Create an instance of the DataService through dependency injection
constructor(private _dataService: DataService) {
// Access the Data Service's getUsers() method we defined
this._dataService.getEmployees()
.subscribe(res => this.employees = res);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {TestComponent } from '../test/test.component';
import { AppRoutingModule } from './app-routing.module';
import{DataService} from './data.service'
import {HttpModule} from '@angular/http'
@NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpModule
],
declarations: [
AppComponent,
TestComponent
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
アウト
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IndexV3</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>
<test-html></test-html>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
ノード/ Expressは希望
Downoad screenshot Output after running localhost:3000 as desired anchor tag renderedとしてホームページの
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();
// API file for interacting with MongoDB
const api = require('./server/routes/api');
// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'dist')));
// API location
app.use('/api', api);
// Send all other requests to the Angular app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
//Set Port
const port = process.env.PORT || '3000';
app.set('port', port);
const server = http.createServer(app);
server.listen(port,() => console.log(`Running on localhost:${port}`));
出力をserver.js NGビルド/dist/index.htmlを通じてフォルダの入れ
アンカータグのURLをクリックを変更しますが、テストコンポーネントのdidntは、ブラウザ上でレンダリングした後
test.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'test-html',
templateUrl: './test.component.html'
})
export class TestComponent {
title = 'app';
}
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
</h1>
</div>
<a [routerLink]="['/Test']" >test</a>
<ul>
<li *ngFor="let employee of employees">{{employee.name}}</li>
</ul>
test.component.html
<span>yeeee</span>
プロジェクト構造
download project structure if required
は私が.. :(そのおかげで男を逃し信じてすることはできません:) – Var