Question

想知道我们可以通过两种渲染URL运行一个angular 6应用吗？

示例：

www.domain.com/abc1

www.domain.com/abc2

我们有两个将使用同一应用程序的URL，但是不同之处在于，每当渲染abc1时，显示的数据就不同于abc2。两者共享相同的代码/应用程序。

不确定如何执行此操作？

Answer 1

如果数据来自后端并且Angular应用程序的数据源不同，则应尝试以下操作：

ng build --prod --base-href "/abc1/"

ng build --prod --base-href "/abc2/"

Answer 2

您可以根据要加载的视图创建不同的布局。

Answer 3

列出的其他方法的替代方法是，实际上是在不同的路线上实际使用同一应用程序。

假设您要列出待办事项，但在/abc1上它们来自server-1.com/api，在/abc2上它们来自server-2.com/api。

您首先要创建应用程序路由模块，以捕获URL的“子域”（虽然实际上是虚拟目录，但您称呼它）部分。因此，app-routing.module.ts具有以下路线：

const routes = [
  { path: ':subdomain', component: TodosComponent },
];

// and the rest of it.

（为简单起见，我在这里不做模块）。

因此，现在您的TodosComponent只需读取“子域”并从适当的后端获取内容：

class TodosComponent implements OnInit {
    // inject the backend service (or more) and activated route
    constructor(private backend: BackendService,
      private route: ActivatedRoute) {
    }

    // on init, get that route param
    ngOnInit() {
        this.route.params.subscribe(params => {
            // catch the "subdomain" param
            const subdomain =  params.subdomain;
            // now you'd move this to a service, but here:
            if (subdomain === 'abc1') {
                this.backend.get('http://server-1.com/api').subscribe(...);
            } else if (subdomain === 'abc2') {
                this.backend.get('http://server-2.com/api').subscribe(...);
            } else {
                // add more as needed here.
            }
        })
    }
}

现在，当您在子域之间切换时，这将是与SPA完全一样的应用程序。

在实际的应用程序中，您的应用程序路由会将其传递给一个（懒惰的）模块，该模块将构建所有组件，服务等，以便您可以使用此url段/ route参数对所有设置进行参数化。

如何使用两个网址运行一个角度应用程序？

3 个答案: