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

时间:2016-06-06 14:55:39

标签: angular angular2-routing angular2-template angular2-directives angular2-services

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

package.json -

$code = uniqid($val1 . $val2 . $val3);

init.ts - 定义了所有路线

            {
              "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"
              }
            }

projectsListComponent.ts - 显示所有项目的主要组件,并指定使用RouterLink调用的第二级路由

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

            }

内部projectsDetailsComponent.ts - 简化了html以显示组件的内部工作原理

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

                    });
                }
            }

用于提取项目信息的服务文件..

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

2 个答案:

答案 0 :(得分:0)

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

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "C:\Python35\lib\site-packages\P4.py", line 410, in <module>
    import P4API
ImportError: DLL load failed: The specified module could not be found.

答案 1 :(得分:0)

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