【发布时间】：2016-10-06 05:57:07
【问题描述】：
我的 Angular 2 网站有一个主导航，所有这些路线都没有问题......但是我的内页比主路线低 1 级，他们根本不遍历甚至识别链接时的变化被点击.. url 栏保持不变，页面只是空白。以下是我感兴趣的主要文件：
package.json --
{
"name": "",
"version": "",
"author": "",
"description": "",
"main": "src/tmp/app/main.js",
"scripts": {
"postinstall": "typings install",
"start": "gulp",
"test": "gulp test",
"coveralls": "node ./node_modules/coveralls/bin/coveralls.js < ./report/remap/lcov.info"
},
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"bootstrap-sass": "^3.3.6",
"es6-shim": "^0.35.0",
"font-awesome": "^4.6.1",
"jquery": "^2.2.3",
"lodash": "^4.13.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "^0.19.29",
"zone.js": "^0.6.12"
},
"devDependencies": {
"browser-sync": "^2.12.8",
"codelyzer": "0.0.19",
"connect-history-api-fallback": "^1.2.0",
"del": "~2.2.0",
"glob": "^7.0.3",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
"gulp-if": "~2.0.1",
"gulp-protractor": "^2.3.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.0.0",
"gulp-rev-replace": "^0.4.3",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^5.0.0",
"gulp-typescript": "~2.13.4",
"gulp-uglify": "~1.5.3",
"gulp-useref": "~3.1.0",
"gulp-watch": "^4.3.6",
"jasmine-core": "~2.4.1",
"karma": "~0.13.22",
"karma-coverage": "~1.0.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "~1.0.2",
"karma-phantomjs-launcher": "~1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"ngstarter-systemjs-tasks": "1.0.0-rc.1",
"phantomjs-prebuilt": "^2.1.7",
"remap-istanbul": "~0.6.4",
"require-dir": "~0.3.0",
"run-sequence": "^1.2.1",
"traceur": "~0.0.110",
"tslint": "^3.10.2",
"typings": "^1.0.4",
"yargs": "^4.7.1"
}
}
init.ts - 定义的所有路由
import {Component} from '@angular/core';
import {HomepageListComponent} from '../Homepage/list/HomepageListComponent';
import {ProjectsListComponent} from '../Projects/list/ProjectListComponent';
import {ProjectDetailsComponent} from '../Projects/details/ProjectDetailsComponent';
import {ContactComponent} from '../Contact/ContactComponent';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
declare var jQuery: any;
@RouteConfig([
{ path: '/', name: 'Home', component: HomepageListComponent },
{ path: '/project', name: 'Project', component: ProjectsListComponent },
{ path: '/project/:slug', name: 'ProjectDetail', component: ProjectDetailsComponent },
{ path: '/contact', name: 'Contact', component: ContactComponent },
// { path: '/', name: 'root', redirectTo: ['/Home'] }
])
@Component({
selector: 'init',
templateUrl: './app/components/init/init.html',
directives: [ROUTER_DIRECTIVES]
})
export class InitComponent {
title: string;
constructor() {
this.title = 'App title';
}
pageChanged(e) {
jQuery(document.body).removeClass('navigation-is-open');
console.log(e);
}
}
projectsListComponent.ts - 显示所有项目的主要组件，还指定了使用 RouterLink 调用的二级路由
import {Component, ElementRef, OnInit} from '@angular/core';
import {ProjectsMainApi} from '../../../services/projects-main';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
declare var jQuery: any;
@Component({
selector: 'projects',
template:
`<a class="project-display" *ngFor="let projekt of project | async" [routerLink]="['ProjectDetail', {slug: projekt.slug }]" >
</a>`,
directives: [ROUTER_DIRECTIVES]
})
export class ProjectsListComponent implements OnInit {
elementRef: ElementRef;
project: Observable<any>;
constructor(elementRef: ElementRef, private _projectsmainapi: ProjectsMainApi) {
this.elementRef = elementRef;
this.project = this._projectsmainapi.project$;
this._projectsmainapi.getProjectsMain();
}
ngOnInit() {
this.project.subscribe(() => {
setTimeout(function() {
jQuery('.projects').projects();
}, 0);
});
}
}
内部项目DetailsComponent.ts -- html已被简化以显示组件的内部工作原理
import {Component} from '@angular/core';
import {ProjectsMainApi} from '../../../services/projects-main';
import { RouteParams, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
declare var jQuery: any;
interface ProjectResult {
project: Object;
}
@Component({
selector: 'projects',
template: `<h1>I am a single page for a specific project </h1>`,
directives: [ROUTER_DIRECTIVES]
})
export class ProjectDetailsComponent {
project: Object = {};
constructor(private _api: ProjectsMainApi, private _params: RouteParams) {
this._api.getSinglePortfolio(_params.get('slug')).then(
(res: ProjectResult) => {
this.project = res.project[0];
},
(error) => {
console.error(error);
});
}
}
以及将项目信息拉入的服务文件..
import {Http, Headers, Response} from '@angular/http';
import {Injectable} from '@angular/core';
import {IProjectsMain} from '../interfaces/AvailableInterfaces';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Injectable()
export class ProjectsMainApi {
apiUrl: string = 'http://www.siteexample.com/api/projects';
headers: Headers = new Headers;
project$: Observable<IProjectsMain[]>;
private _ProjectsMainObserver: Observer<IProjectsMain[]>;
private _dataStore: {
project: IProjectsMain[]
};
constructor(private _http: Http) {
this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.headers.append('X-Requested-With', 'XMLHttpRequest');
this.project$ = new Observable<IProjectsMain[]>(observer => this._ProjectsMainObserver = observer).share();
this._dataStore = { project: [] };
}
public getProjectsMain() {
this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {
this._dataStore.project = data.project;
this._ProjectsMainObserver.next(this._dataStore.project);
}, error => console.log('Could not load projects.'),
() => 'done');
}
public getSinglePortfolio(id) {
console.log('the id is ' + this.apiUrl + '/' + id);
return new Promise((resolve, reject) => {
this._http.get(this.apiUrl + '/' + id).map((res: Response) => res.json()).subscribe(
(res) => {
resolve(res);
}, (error) => {
reject(error);
});
});
}
}
【问题讨论】：
-
链接在哪里以及它们的外观如何？
-
如果您查看我在上面提供的 projecListComponent.ts 中的 a 元素，您将在 routerlink 中看到它
-
“RouterLink”唯一出现在文本“使用RouterLink调用路由”
-
查看下面代码块中的ngFor，你会看到[routerLink]=
-
抱歉，我使用浏览器搜索（在页面中查找）但没有显示：-/
标签： angular angular2-routing angular2-template angular2-directives angular2-services