所以我的理解是我需要使用ROUTER_PROVIDERS引导我的根应用程序组件,以便这些服务可用于我的应用程序并为要实现路由到ROUTER_DIRECTIVES的组件设置指令.

这是我有的：

//ANGULAR  ******************************
import {provide,Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
        APP_BASE_HREF,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,HashLocationStrategy,LocationStrategy,RouteConfig,} from 'angular2/router';

//COMPONENTS  ******************************
import {ShiftCalendarComponent} from './components/calendar/shift-calendar.component';
import {ShiftAdminComponent} from './components/admin/shift-admin.component';
import {ShiftListComponent} from './components/shifts/shift-list.component';

//CLASS  ******************************
@Component({
    selector: 'shift-app',directives: [ROUTER_DIRECTIVES],template: `<div>
                 <nav>
                     <h3> Navigation: </h3>
                     <ul>
                         <li><a [routerLink]="['Calendar']" > Home </a></li>
                         <li><a [routerLink]="['Admin']" > About </a></li>
                         <li><a [routerLink]="['Shifts']" > Contact us </a></li>
                     </ul>
                 </nav>            
                 <router-outlet></router-outlet>
             </div>`
})
@RouteConfig([
    { path: '/',name: 'root',redirectTo: ['/Calendar'] },{ path: '/calendar',name: 'Calendar',component: ShiftCalendarComponent },{ path: '/admin',name: 'Admin',component: ShiftAdminComponent },{ path: '/shifts',name: 'Shifts',component: ShiftListComponent }
])
export class ShiftApp { } 

//BOOTSTRAP   ******************************
    bootstrap(ShiftApp,[
        ROUTER_PROVIDERS,provide(LocationStrategy,{ useClass: HashLocationStrategy }),provide(APP_BASE_HREF,{ useValue: '/' })    
    ]);

角度应用程序加载并显示模板,但没有链接工作,我在控制台中收到以下错误：

EXCEPTION: No provider for Router! (RouterLink -> Router) angular2.dev.js

在我的index.html(我称之为view.html)中,我已链接到所有相关库,并且包含了router.dev.js,我的控制台的sources选项卡显示我已成功加载所有需要的脚本.

我已经阅读了关于Angular2和整个路由器文档的路由器链接错误的每个堆栈溢出问题,但无法找到为什么我的工作不正常.据我所知,我的代码匹配the Angular2 Documentation

This documentation显示ROUTER_DIRECTIVES包含RouterOutlet和RouterLink等指令

题？

如果我成功地将组件的指令设置为ROUTER_DIRECTIVES,为什么我得到“No Router for Router！RouterLink”错误？

import {bootstrap} from 'angular2/platform/browser';
import {provide,Component} from 'angular2/core';
import {ShiftApp} from './app.component';

import {
    APP_BASE_HREF,LocationStrategy
} from 'angular2/router';

bootstrap(ShiftApp,[
    ROUTER_PROVIDERS,{ useValue: '/' })
]);

在index.html中导入该新文件：

System.config({
    packages: {
        app: {
            format: 'register',defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null,console.error.bind(console));

这样做的优点可以在here找到.

同样如注释中所述,引导您的根组件而不是子组件.

弹出窗口的内容有一个指向角度组件的链接.但是当我在.setContent()函数中使用routerLink时,链接不会显示.

我猜这种情况正在发生,因为.setContent()无法呈现有意义的angular 2指令.我可以用什么呢？

@Component({
  selector: 'app-map',templateUrl: './map.component.html',styleUrls: ['./map.component.css']
})

export class MapComponent implements AfterViewInit {

  openmap: any;

  constructor() { }

  ngAfterViewInit() {

    let openmap = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",{
      attribution: 'terms and Feedback'
    });

    let map = L.map("map",{
      center: [33.2148,-97.1331],zoom: 5,zoomControl: true,maxZoom: 18 
    }).addLayer(openmap);

    let marker = L.marker([39.2148,-98.1331]).addTo(map);

    let popup = L.popup();

    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("Facility" + "<br/>" + "<a routerLink='/view2'>" + "View Two" + "</a>")
        .openOn(map);
    }

    map.on('click',onMapClick);
  }

}

针,如果我把它更改为

.setContent("Facility" + "<br/>" + "<a href='../view2'>" + "View Two" + "</a>")

会做我想要的,但这会导致页面刷新,所以这不是一个选项.

简单的方法是在没有RouterLink的情况下使用带有angular元素的原始HTML.注册该锚点元素的点击并使用路由器服务进行导航.

任务是发射链接,但实际问题更深入,现在它链接下次显示一个角度组件…

因此,对于复杂的解决方案：

这是一个非常高级的主题……不仅涉及使用先进的角度技术,它在传单实现中也是先进的.

我将尽力传达信息,但由于复杂性,示例将非常简单并且需要工作.

第一 – 角度领域.

包含指令,组件或管道的HTML字符串永远不会起作用,唯一的方法是初始化View

让我们将A View定义为查看组件或模板实例的参考.

这些被称为ComponentRef和TemplateRef

所以,我们有两种方法可以解决这个问题.由于我不能同时使用ComponentRef,但请注意您也可以使用TemplateRef.
使用模板,您首先需要获取组件中定义的模板以及将该模板附加到的ViewContainerRef.

我们将构建一个接受传单Marker并绑定到标记的click事件的服务,点击它将打开一个弹出窗口,它是一个角度组件.

组件很简单,它呈现链接.

@Component({
  selector: 'facility-link',template: `Facility <br/> <a routerLink="{{link}}"> View Two</a>`
})
export class FacilityLinkComponent {
  public link: string;
  constructor() { }
}

现在,为服务：

@Injectable()
export class LinkPopupService {

  constructor(private cfr: ComponentFactoryResolver,private injector: Injector,private appRef: ApplicationRef) { }


  register(marker: leaflet.Marker,link: string): void  {
    marker.on('click',($event: leaflet.MouseEvent)  => this.popup($event.target,link) );
  }

  popup(marker: leaflet.Marker,link: string) {
    const cmpFactory = this.cfr.resolveComponentFactory(FacilityLinkComponent);
    const componentRef = cmpFactory.create(this.injector);
    componentRef.instance.link = link;
    this.appRef.attachView(componentRef.hostView);
    const markerElement = marker.getElement();
    markerElement.parentElement.appendChild(componentRef.location.nativeElement);

    const markerPos = leaflet.DomUtil.getPosition(markerElement);
    const markerClass = leaflet.DomUtil.getClass(markerElement);


    leaflet.DomUtil.setTransform(componentRef.location.nativeElement,markerPos);
    leaflet.DomUtil.setClass(componentRef.location.nativeElement,markerClass);
  }
}

register方法接受标记和链接并注册click事件.

当弹出方法触发时,它使用角度工具创建FacilityLinkComponent的视图实例,设置未来绑定的链接,将视图附加到它并将其附加到DOM.

这一切都发生在前5行代码中.

一些说明：

>我们必须附加一个视图,以便更改检测工作
>正确的实现将允许设置ViewContainerRef和/或Injector – 这是使用延迟加载时必须的.
>最好通过Injector将数据发送到组件,而不是通过赋值(ReflectiveInjector)
>需要正确清理(破坏组件并分离视图)
>需要添加切换逻辑,也可以在导航上清理.

传单

第6行的代码执行弹出窗口的定位.

这是一个非常简单的逻辑,它只是复制标记中的所有内容.

这就是我使用标记的原因,所以我将有一个参考来定位.

在一个真实世界的例子中,你需要获得一个面板并将组件推入他们自己的层,计算位置.这并不困难,因为传单有所有的帮助,但它太多了.

希望能帮助到你.

<a [routerLink]="[location]">Location</a>

<select (change)="navigate($event.target.value)">
    <option>--Select Option--</option>
    <option [value]="[location]">Location</option>
</select>

我正在寻找这样的东西：

<select>
    <option>--Select Option--</option>
    <option [routerLink]="[location]">Location</option>
</select>

如果您查看Angular 2路由器source code for RouterLink指令,您将看到它也在场景后面使用router.navigate导航到目标路由.它不适用于您的select控件,因为select没有ClickLink指令捕获的click事件,如下所示：

// ** Code below is copied from Angular source code on GitHub. **
@HostListener("click")
  onClick(): boolean {
    // If no target,or if target is _self,prevent default browser behavior
    if (!isstring(this.target) || this.target == '_self') {
      this._router.navigate(this._commands,this._routeSegment);
      return false;
    }
    return true;
  }