Angular组件selector未在别处引用的原因及修改方法

问题1解答 #

Angular把组件关联到<router-outlet>的逻辑，和selector完全没关系，你可以把这俩当成两套独立的组件调用机制：

• 第一种是标签式调用：就是你在其他组件的HTML里写<app-login></app-login>的时候，Angular才会去匹配所有组件的selector配置，找到对应selector: 'app-login'的LoginComponent来渲染，这个场景才会用到selector的值。
• 第二种就是你用的路由式调用：你在路由配置里已经直接指定了path: 'Login'对应component: LoginComponent这个类，当你访问/Login路径时，路由模块会直接拿到LoginComponent的定义，跳过selector匹配步骤，直接把组件的视图动态插入到<router-outlet>所在的DOM位置。

所以你没在其他地方找到app-login的取值很正常，因为你一直用路由渲染这个组件，selector在这个场景下根本没有被调用到。

问题2解答 #

改selector的工作量完全取决于你有没有用过标签式调用这个组件：

• 如果你的项目里从来没在任何HTML模板中写过<app-login></app-login>标签，全靠路由渲染LoginComponent：那你只需要修改@Component配置里的selector值从app-login改成hello就可以，其他任何文件都不用改，项目运行完全不受影响。
• 如果你在其他组件的HTML里用过<app-login>标签调用这个组件：那你要把所有HTML文件里的<app-login>标签全部替换成<hello>，同时修改组件里的selector配置就可以，路由配置、组件类名这些都不需要动。

内容的提问来源于stack exchange，提问作者Jeb50