如何设置嵌套路由

时间:2018-02-05 02:11:46

标签: angular routing

我正在调用API并获得嵌套页面。 我似乎无法理解如何创建路由。

对于我理解的页面,您可以这样做:

/*
 * This program
 */
package flipper;

/**
 *
 * @author 21psuby
 */
public class Cell {

private final double x;
private final double y;
private final double side;
private final int curve = 16;

Cell(double xVal, double yVal, double sideVal) {
    x = xVal;
    y = yVal;
    side = sideVal;
}

public int getX() {
    return (int) x;
}

public int getY() {
    return (int) y;
}

public int getSide() {
    return (int) side;
}

public int getCurve() {
    return curve;
}
}

当页面嵌套时如何路由页面,我不知道哪个页面将嵌套在哪个页面下?我只关心页面被渲染。

   {
      path: ':id',
   }

例如:

   {
      path: 'id/:id',
   }

1 个答案:

答案 0 :(得分:1)

您应该以这种方式创建路线:

{
      path: '/prefix/:category/:id',
      loadChildren: './page/page.module#PageModule',
      canActivate: [
            fromGuards.PrivatePagesGuard,
      ],
      resolve: {
         content: MyDynamicResolver
      }
   }

然后在您的解析器中,您将可以访问category和id参数,因此您可以使用服务来获取资源。

@Injectable()
export class MyDynamicResolver implements Resolve<any> {
    constructor(private http: HttpClient) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PageCMS> {
        const category = route.paramMap.get('category');
        const id = route.paramMap.get('id');

        return <fetch your content from http or service here>;
    }
}

您将能够通过ActivatedRoute

的数据在组件中访问它
constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.content = this.route.snapshot.data['content'];
}

“/ prefix”可以是任何内容,其唯一目的是创建可以匹配任何URL的过于通用的路由。