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

【问题标题】：How to get additionalData of RouteDefinition inside of a html template in Dart如何在 Dart 的 html 模板中获取 RouteDefinition 的附加数据
【发布时间】：2019-10-20 22:07:51
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： dart angular-dart angular-dart-routing

【解决方案1】：

为了访问您在路由定义中传递的附加数据，您必须先在组件中检索它。

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>

【讨论】：