Question

如何浏览（浏览）位于assets文件夹中的大约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;
                }
            }
        })

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

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

我们怎么能用角度来做呢？我们在哪里使用角度ver。 5.1 with angular-cli ver。 1.5。

Answer 1

如果您的模板只是基本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'});
    }
}

在您的路由配置

中

path: '/page/:pageName/:Nav',
component: PageComponent,
resolve: {
    content: PageResolver
}

并在您的组件中

export class PageComponent implements OnInit {
    public content: string;

    constructor(private route: ActivatedRoute) {}

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

并在模板中

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

但是如果你想动态获得角度内容，你必须使用像ngx-dynamic-template

这样的lib

<div dynamic-template [template]="content"></div>

使用Angular

1 个答案: