Question

由于Angular2路由器是RC，我决定构建一个没有路由的应用程序，但是我没有找到如何调用不同的组件，让我知道我的方法是否正确，因为我不想使用路由器。

index.html有一个app.component.ts的引用（标记）（我的主要组件..我在main.ts上引导它）

但在这个app.component.ts里面我想调用另一个组件，如何继续？我测试了在app.component模板中添加另一个组件，但是多个组件将很难维护每次渲染哪个组件......

需要有关此多组件结构的帮助：

主要组成部分------（链接）----＆gt;用户注册表组件-----（链接）-----＆gt;忘了密码组件

谢谢！

Answer 1

听起来像我项目中的应用程序架构师。无论如何，您最好的选择是实际使用该路由器并消除痛苦here。

虽然因为这不是我的决定而且很可能不是你的决定，但最简单的选择是在点击链接时隐藏和显示基于标志的组件。所以你需要一个用户注册表组件的标志和另一个忘记密码组件的标志。单击链接时，您将相应的标志设置为true。

@Component({
    selector: 'app',
    template: 
    '<app>
        <p>
            i'm the app!
            <a href="#" (click)="activateUserRegistry()">User Registry</a>
            <a href="#" (click)="activateForgotPassword()">Forgot Password</a>
        </p>
        <div [Style.display]="isUserRegistryActive ? 'block' : 'none'">
            <userRegistry></userRegistry>
        </div>
        <div [Style.display]="isForgotPasswordActive ? 'block' : 'none'">
            <forgotPassword></forgotPassword>
        </div>
    </app>'
})
export class App {
    activeFlags = {
        ...
        isUserRegistryActive: Boolean = false;
        isForgotPasswordActive: Boolean = false;
        ...
    }

    deactivateAll() {
        for(var prop in this.activeFlags) {
            this.activeFlags[prop] = false;
        }
    }

    ...
    activateUserRegistry() {
        this.deactivateAll();
        this.activeFlags.isUserRegistryActive= true;
    }
    activateForgotPassword() {
        this.deactivateAll();
        this.activeFlags.isForgotPasswordActive = true;
    }
    ...
}

正如您所看到的，代码非常混乱，因此Angular2团队首先想出了路由器。另一个混乱的方法可能是使用Renderer动态呈现内容，这比上面的代码更糟糕。作为开发人员，您需要知道代码的外观，给出或从上面的代码中获取。

此外，路由器不仅仅路由到组件。它还会分离DOM元素并删除事件处理程序绑定以提高性能。如果你选择走凌乱的路线，你可能想要关注所有这些。

免责声明：尚未测试此代码，只是为了证明概念。

Answer 2

1）如果要从一个页面重定向到另一个页面，则需要路由器/路由。

2）你可以选择DynamicComponentLoader(DLC)，你可能会结束复杂的事情。

3）正如@Hani建议的那样，但你必须管理很多事情。

路由器的问题是什么？ Angular2 router非常强大。你应该试试看。

如何在没有路由系统的情况下处理应用程序结构

2 个答案: