Question

我正在将AngularJS应用程序升级到Angular6。我已经阅读了很多有关AngularUpgrade和UrlHandlingStrategy的教程，但是我找不到将AngularJS状态转换传递给Angular 2+路由器的正确方法。

目前，我的实现存在一个缺陷：如果存在仅由ui-router处理的过渡，例如html代码中的“ ui-sref =“，那么Angular 2路由器将不知道这一点。结果是Angular 2组件没有出现或没有消失。如果我重新加载页面，则Angular 2路由器将捕获新的URL，并且Angular 2组件会完美显示或消失。

这是我的实现方式：

navigation.html：（AngularJS）

<a ui-sref="dashboard">Dashboard</a>
<a ui-sref="component1">Component1</a>

app.js：（AngularJS）

awesomeapp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    // html5mode is necessary for hybrid app
    $locationProvider.html5Mode(true);

    // For any unmatched url, send to /
    $urlRouterProvider.otherwise('/');

    // comment this
    $stateProvider
        .state('dashboard', {
            url: '/dashboard',
            template: ''
        })
        .state('Component1', {
            url: '/component1',
            templateUrl: 'views/component1.html,
			controller: 'Component1Ctrl'
        });		
)};

app.component.html ：（角度2）

<div id="wrapper">
  <!-- Navigation template -->
  <div ng-include="'views/navigation.html'"></div>
  <!-- Render route content here -->
  <div id="page-wrapper" class="container" ui-view autoscroll="true"></div>
  <div id="page-wrapper-angular4" class="container"autoscroll="true">
    <router-outlet></router-outlet>
  </div>
</div>

app.routing.js ：（角度2）

const routes: Routes = [
  { path: 'dashboard', component : DashboardComponent },
  { path: '', pathMatch: 'full', component: EmptyComponent }
];

app.modules.js ：（角度2）

class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(url) { return url.toString().startsWith("/dashboard") ||  url.toString() === "/"; }
  extract(url) { return url; }
  merge(url, whole) { return url; }
}

...

  providers: [
    { provide: APP_BASE_HREF, useValue : '/' },
    { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
  ],

如果我在“ Component1”页面上，然后单击链接“仪表板”，则最初不会显示最后一个。如果我重新加载页面，则仪表板会完美显示。如果我在“仪表板”页面上，并且单击链接“ Component1”，则结果为：顶部为“ Component1”，底部为“ Dashboard”；最终，如果我重新加载页面，则仪表板会完全消失。

将角度1状态转换传递到角度2路由器

0 个答案: