Angular开发中如何使用字符串变量作为outlet名称

解决方法 #

你原有代码中outlets: {rr: rr2}的写法会把rr识别为固定字符串属性名，不会读取你定义的rr变量的实际值，改用ES6+的计算属性名语法即可：

public redirect(): any {
  let rr = 'productModal';
  let rr2 = 'm/addProduct';
  return this.router.navigate(    
    ['link/link', {outlets: {[rr]: rr2}}]
  );
}

原理说明 #

把变量用方括号[]包裹作为对象属性名时，运行时会先解析变量的值，再将该值作为属性名绑定到对象上，此处就会把rr变量的值productModal作为outlet的名称使用，符合你的需求。

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