Question

我正在学习Angular，我希望根据当前的URL包含模板。我有两页登录和注册，我当然不希望每次都在app.component.html中加入。我在google上做了很多搜索，但还没有找到任何解决方案。这就是我尝试这样做的方式 index.html

<body>
    <input type="hidden" #currentUrl value="" id="current-url">
    <script>
        function getUrlParts(url) {
            var a = document.createElement('a');
            a.href = url;

            return {
                href: a.href,
                host: a.host,
                hostname: a.hostname,
                port: a.port,
                pathname: a.pathname,
                protocol: a.protocol,
                hash: a.hash,
                search: a.search
            };
        }
        document.getElementById('current-url').value = getUrlParts(window.location.href).pathname;
    </script>
    <app-root></app-root>
</body>

这是app.component.html

<app-dashboard></app-dashboard>
<app-login *ngIf="document.getElementById('current-url').value == '/login'"></app-login>
<router-outlet></router-outlet>

由于app.component.html无法访问文档对象，因此无效有没有解决方法来实现这一目标？我知道Angular适用于单页应用程序，但除登录和注册外，我的整个应用程序将是一页。

更新

到目前为止，我从角度理解的是你包含app.component.html中所有页面共享的一些组件（导航栏，侧边栏，页脚等），并将路由器插座放在那里以加载页面的不同部分基于网址。但是，如果我不在app.component.html中添加任何东西，除了router-outlet，那么我将加载每个页面的所有组件。如果我将登录/注册组件放在那里，每次加载页面时都会加载它们。

根据当前网址Angular 5有条件地在app-root中包含模板

0 个答案: