使用Angular导航静态Html文件

如何在资产文件夹中的大约50个静态Html文件之间导航（浏览），而无需为每个文件创建组件或路由条目

我们以前使用$stateProvider对angularJS进行过类似操作，如下所示：

  $stateProvider
        .state('guide.page', {
            controller: 'guideController',
            controllerAs: 'guideCtrl',
            url: '/page/:pageName/:Nav',
            templateUrl: function (url) {
                return "/userfiles/files/guide/" + url.pageName + ".htm";
            },
            resolve: {
                showNav: function ($stateParams) {
                    return $stateParams.Nav;
                }
            }
        })

<a ui-sref="guide.page({pageName:'003'})">link to static page no 003</a>

其中pageName作为静态页面链接中的参数发送，如下所示：

  $stateProvider
        .state('guide.page', {
            controller: 'guideController',
            controllerAs: 'guideCtrl',
            url: '/page/:pageName/:Nav',
            templateUrl: function (url) {
                return "/userfiles/files/guide/" + url.pageName + ".htm";
            },
            resolve: {
                showNav: function ($stateParams) {
                    return $stateParams.Nav;
                }
            }
        })

<a ui-sref="guide.page({pageName:'003'})">link to static page no 003</a>

链接到静态第003页

我们怎样才能用角度来做呢？。

---

在这里我们使用的是角速度。5.1带角度控制面板。1.5.

如果您的模板只是基本的HTML，您可以使用解析器并使用xhr获取内容

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

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
        return this.http.get(`/userfiles/files/guide/${route.paramMap.get('pageName')}`, {responseType: 'text'});
    }
}

在你的组件中

export class PageComponent implements OnInit {
    public content: string;

    constructor(private route: ActivatedRoute) {}

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

在模板中

<div [innerHTML]="content"></div>

但是如果你想动态地拥有角度内容，你必须像lib一样使用它

---

检查此问题：感谢您的解决方案，它工作正常，只是在activeRouter.data上添加了“订阅”，如下所示：this.activeRouter.data.subscribe（loggedIn=>{this.content=this.activeRouter.snapshot.data['content']；}）；