Question

尝试完成旧路由器陷入困境的教程。我已更新代码以使用新路由器，但我无法理解routerLink。感谢您的帮助。

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
])
.catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { NavbarTopComponent} from './components/navbar-top/navbar-top.component';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {SearchComponent} from './components/search/search.component';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    directives: [ROUTER_DIRECTIVES,NavbarTopComponent,SearchComponent]

})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {SearchComponent} from './components/search/search.component';

export const routes: RouterConfig = [
  { path: '', component: SearchComponent },
  { path: 'about', component: AboutComponent },
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

app.component.html

<navbar-top></navbar-top>
<div class="main">
    <div class="container">
        <router-outlet></router-outlet>
        </div>
</div>

导航栏-top.component.html

 <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>

systemjs.config.js

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

  var config = {
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

导航栏-top.component.ts

import { Component } from '@angular/core';
@Component({
    moduleId:module.id,
    selector: 'navbar-top',
    templateUrl: 'navbar-top.component.html'
})
export class NavbarTopComponent { }

Answer 1

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router'; //<-------- required

@Component({
    moduleId:module.id,
    selector: 'navbar-top',
    templateUrl: 'navbar-top.component.html',

    directives: [ROUTER_DIRECTIVES]  //<-------required

})
export class NavbarTopComponent { }

RC4 - 无法绑定到＆＃39; routerLink＆＃39;因为它不是一个已知的本地财产

1 个答案: