为什么'选择器'值在其他地方找不到，我可以改变它吗?

Question

我使用ng generate开发组件和服务，所有这些都在我的Angular v11应用程序中工作。但有一件事我很无能，selector:的价值除了在组件自己的TS文件中从未找到过。所以你知道我对Angular还是个新手，如果你觉得问题很蠢，请原谅。

问题1。Angular是怎么知道/link/map到<router-outlet></router-outlet>的?

例如，ng g component login生成login.component.ts:

@Component({
selector: 'app-login',      // <-- only appearance of 'app-login'
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent{...}

我知道它将被插入到占位符<router-outlet></router-outlet>路由在app-rounting.module.ts

const routes: Routes = 
[{ path: 'Login', component: LoginComponent }];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],    
exports: [RouterModule]
})
export class AppRoutingModule { } 

问题2。如果我想从app-login更改为hello，我需要更新的地方和内容?

简单明了的英语更容易理解，谢谢你，谢谢你。

Answer 1

我试着把它分开。

selector的

值只能在组件自己的TS文件中找到。

现在对于这个，只要这个component属于module以及可以在declarations中找到的其他组件对于这个特定的module，那么这个component是可见的，这个component的selector可以在同一个module中的任何其他component中使用。

现在，如果我们想要这个component在它所属的module之外可见，那么我们需要一些额外的配置。在这种情况下，我们必须将其添加到exports数组中。通过在我们的目标module中导入整个module，我们可以访问这个component。当你有一个将在整个应用程序中使用的共享module时，这可能会很有用。

@NgModule({
declarations: [
HeaderComponent,
FooterComponent
],
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
FooterComponent
],
})
export class SharedModule {}

现在，以我的LayoutModule为例，我可以导入SharedModule并获得对其组件的访问权。

@NgModule({
imports: [
CommonModule,
FormsModule,
LayoutPageRoutingModule,
TranslateModule,
SharedModule, <- Imported Here
ComponentsModule,
],
declarations: [LayoutPage],
})
export class LayoutPageModule {}

回到你的问题:

问题1。Angular是怎么知道/link/映射到<router-outlet></router-outlet>的?

当你告诉Angular这个">链接"对应于这个component，你告诉它这里的这一行

const routes: Routes = [{ path: 'Login', component: LoginComponent }];

现在每次点击这个链接，component将在router-outlet中呈现.

问题2。如果我想将它从app-login更改为hello，我需要更新的地方和内容?

这是简单的部分，您只需更改selector，不需要配置其他任何内容，因为基本上真正重要的是类名称，相关的HTML&CSS文件名，相对路径.

@Component({
selector: 'hello',   // <-- Change it just like this, and start using it as <hello></hello>
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent{...}

注意:注意不要在HTML中使用预先保留的标记，因为这可能会导致一个问题()。selector: div)，这个app-前缀是为了防止这样的问题。

希望有帮助。