首页 文章

Angular 2路由器 - 第二级链接不工作

提问于
浏览
0

我的Angular 2网站有一个主导航,所有这些路线都没有问题...但是我的内页是从主路线向下1级,他们只是在点击链接时不会遍历甚至识别变化 . . 网址栏保持不变,页面空白 . 以下是我感兴趣的主要文件:

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);

                    });
                }
            }

内部projectsDetailsComponent.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);
                            });
                    });
                }
            }

2 回答

  • 0

    这是很多代码,我没有尝试完全理解你提供的所有内容,但是从我发现我认为它应该是

    [routerLink]="['../ProjectDetail', {slug: projekt.slug }]"
    
  • 0

    如果有人遇到过这种情况 - 内部模板无法工作,因为我正在调用RuntimeCompiler类来清除模板缓存..当我使用节点tsc编译我的ts时它起作用但是出于某种原因使用它作为gulp的一部分工作流程完全打破了页面..

相关问题