Question

可以获得当前的组件名称吗？

例如，如果我有localhost:3000/en/mycomponent而我将this.router.url，则会返回/en/mycomponent /language/component

我想改变语言的重定向。

我可以制作

this.router.navigate([this.lang, my component here]);

但是如何从路由中获取当前组件？

Answer 1

我遇到了与上面相同的问题，并且能够使用以下内容来检索组件名称： this.route.routeConfig.component.name。这返回了一个我们可以比较的字符串值。

Answer 2

Angular CLI：

您可以从构造函数中访问组件名称：

 console.log('this', this.constructor.name);

 this.constructor.name; // Component name

Answer 3

您可以获得如下组件名称

export class MyComponent{

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {
    // Below will result in MyComponent
    console.log(this.route.component.name);         
  }
}

说过路由是基于路径而不是组件名称。

希望这会有所帮助!!

Answer 4

只有那个组件名称是不够的..您可能需要其他选项等等..

如果第一段始终是您的language，请执行以下操作：

let urlSegments = this.route.url.split('/');
urlSegments[1] = this.lang;
this.router.navigate(urlSegments.join('/'));

Answer 5

您可以像这样从“ ActivatedRoute”模块获取当前组件名称：

TcpClient client = new TcpClient();
private async void Button_Clicked(object sender, EventArgs e)
{
    var result = client.BeginConnect(ipAddress.Text, Convert.ToInt32(Port.Text), null, null);
    var success = result.AsyncWaitHandle.WaitOne(TimeSpan.FromSeconds(1));

    if (success)
    {
        await DisplayAlert("Connected", "The client has successfully connected", "OK");
    }
    else
    {
        await DisplayAlert("Connection Unsuccessful", "The client couldn't connect!", "OK");
    }
}

在onInit或构造函数调用中使用以上内容。在角度为6+的情况下工作正常。不确定较旧的版本。

Answer 6

@Madhu Ranjan答案。

他的方法不适用于点表示法。我们将收到错误消息，例如类型'string'上不存在属性'name'。

因为它期望组件是字符串。当我们使用点表示法时。最重要的是，我们正在访问组件字符串的名称字符串属性。

因为点表示法希望所有内容都在点后接字符串。但是在这里 route.component.name （（component.name不是字符串））。它将尝试在路由对象上找到component.name。

所以在这种情况下最好使用括号符号。它将评估并将给定的表达式转换为字符串。组件是路由对象上的函数。

当我尝试使用时：

console.log('current component rendered', route.['component']['name']);
                    or
console.log('current component rendered', route.component['name']);

我成功获取了组件名称。

Answer 7

您可以使用这样的点号获取组件名称：

let state: ActivatedRouteSnapshot = routerState.root;

while (state.firstChild) {
  state = state.firstChild;
}

const stateComponent = <any>state.component;
const component = stateComponent ? stateComponent.name : '';

Answer 8

角度8

每次返回当前组件的名称时，显示的组件都会更改。

constructor(private router: Router) {
    router.events.subscribe((val) => {
        if (val instanceof ActivationEnd) {
            console.log('componentName', val.snapshot.component['name']);
        }
    });
}

Answer 9

这是可能的，但在生产版本中名称会与开发期间不同，所以不要将它用于任何有价值的东西

例如，如果您需要检查“哪个”组件当前在路由中，最好使用 typeof 而不是检查名称

const onComponent = typeof this.activatedRoute.snapshot.routeConfig.component === typeof MyCustomComponent

获取当前组件名称

9 个答案: