如何在Dart的html模板中获取RouteDefinition的附加数据

Question

我正在尝试在var AdditionalData内部定义路由的页面名称，但我不知道如何在html模板中获取此值。

static final unidadeFederativa = RouteDefinition(
    routePath: RoutePaths.unidadeFederativa,
    component: unidade_federativa_list_template.UnidadeFederativaListComponentNgFactory,
    additionalData: { "pageName": "Unidade Federativa"}
  );

<material-content>
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button icon class="material-drawer-button" (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">{{pageName}}}</span>
            <div class="material-spacer"></div>
        </div>
    </header>
    <div class="app-content">
        <router-outlet [routes]="Routes.all"></router-outlet>
    </div>
</material-content>

Answer 1

为了访问您在路由定义中传递的additionalData，必须首先在组件中对其进行检索。

routes.dart：

 static final all = <RouteDefinition>[
    home,    
    RouteDefinition(
     path: '.+',
     component: not_found_template.NotFoundComponentNgFactory,
     additionalData:{ "status": "404", "error": "Not Found" }
    ),
  ];

not_found_component.dart

class NotFoundComponent implements OnActivate {        

  final Router _router;
  NotFoundComponent(this._router);

  var status;

  @override
  void onActivate(RouterState previous, RouterState current) {
    // To retrieve normal queryParams :
    // var queryParams = current.queryParameters;
    // To retrieve the additional data you posted (check if exists)    
    this.status = current.routePath.additionalData.status;
  }
}

然后您可以在组件的模板中显示数据：

<div>
  <h1>{{status}}</h1>
</div>