[routerLink]
和之间有什么区别routerLink
?您应该如何使用每个?
[routerLink]
和之间有什么区别routerLink
?您应该如何使用每个?
Answers:
您将在所有指令中看到这一点:
使用方括号时,意味着要传递一个可绑定的属性(变量)。
<a [routerLink]="routerLinkVariable"></a>
因此,可以在您的类中定义此变量(routerLinkVariable),并且其值应如下所示:
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
但是有了变量,您就有机会使其变得动态吗?
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
updateRouterLinkVariable(){
this.routerLinkVariable = '/about';
}
在没有括号的情况下,您仅传递字符串,并且无法更改它,它是经过硬编码的,在整个应用程序中都是这样。
<a routerLink="/home"></a>
更新:
关于专门用于routerLink的括号的另一个特殊之处是,您可以将动态参数传递给要导航到的链接:
所以添加一个新变量
export class myComponent {
private dynamicParameter = '129';
public routerLinkVariable = "/home";
更新[routerLink]
<a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>
当您想单击此链接时,它将变为:
<a href="https://stackoverflow.com/home/129"></a>
假设你有
const appRoutes: Routes = [
{path: 'recipes', component: RecipesComponent }
];
<a routerLink ="recipes">Recipes</a>
这意味着单击“食谱”超链接将跳至http:// localhost:4200 / recipes
假设参数为1
<a [routerLink] = "['/recipes', parameter]"></a>
这意味着将动态参数1传递给链接,然后导航至 http:// localhost:4200 / recipes / 1
路由器链接
没有括号的routerLink-简单说明。
routerLink =和[routerLink]之间的区别主要类似于相对路径和绝对路径。
与href相似,您可能需要导航到./about.html或https://your-site.com/about.html。
当您使用不带括号的符号时,您将浏览相对和不带参数的内容;
my-app.com/dashboard/client
从my-app.com/dashboard “跳转” 到my-app.com/dashboard/client
<a routerLink="client/{{ client.id }}" .... rest the same
当您在方括号中使用routerLink时,您将执行应用程序以浏览绝对路径,并可以添加参数以了解新链接的困惑之处
首先,它不会包括从仪表板/到仪表板/客户端/客户端ID的“跳转”,并为您带来客户端/客户端ID的数据,这对于EDIT CLIENT更有用
<a [routerLink]="['/client', client.id]" ... rest the same
routerLink的绝对方法或括号要求对组件和app.routing.module.ts进行附加设置
进行测试时,没有错误的代码将“告诉您更多/ []的目的”。只需选择是否使用[]即可。比起您可能会尝试使用选择器(如上所述),它有助于动态路由。
看一下routerLink的构造