Question

我正在尝试创建一个带有角度2的应用程序，并且想要传递参数来标记[routerLink]中的一个，我想要像这样的链接：

<a href="/auth/signup?cell=1654654654"></a>

我不知道如何在模板中传递cell

Answer 1

您可以使用queryParams与routerLink一起使用构建 url。例如：

<a [routerLink]="['/profiles']" 
[queryParams]="{min:45,max:50,location:29293}">
  Search
</a>

这将构建类似http://localhost:3000/profiles?min=45&max=50&location=29923

的路线

祝你好运。

Answer 2

如果你打算使用 angula2 beta ，那么你必须在路由时发送这样的参数。

export PREFIX="$HOME/opt/cross"
export TARGET=i686-elf
export PATH="$PREFIX/bin:$PATH"

cd $HOME/src

mv isl-0.17 binutils-2.9.1/isl
mv cloog-0.18.4 binutils-2.9.1/cloog

mkdir build-binutils
cd build-binutils
../binutils-2.9.1/configure --target=$TARGET --prefix="$PREFIX" --with-sysroot --disable-nls --disable-werror
make
make install

而不是接收方，而不是通过<a [routerLink]="['signup',{cell:cellValue}]">Routing with parameter</a> <input type='text' [(ngModel)]='cellValue'>获取参数。

如果您打算使用angular2 RC，则必须使用 RouteParams 而不是在angular2 RC中使用RouteSegment。像这样： -

RouteParams

Answer 3

您可以尝试以下代码：你的ts文件是这样的：

@Component({ ... })
@Routes([
    {
        path: '/auth/signup?cell=1654654654', component: AuthComponent
    }
])
export class AppComponent  implements OnInit {
    constructor(private router: Router) {}
}

在你的html文件中，

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>

Answer 4

在Angular2中，支持路由中的查询参数和路径变量。

使用像：

<a [routerLink]="['Signup', {cell: '1654654654'}]">Signup</a>

并在组件中：

@RouteConfig([
    new Route({ path: '/auth/signup', component: SignupComponent, name: 'Signup'})
])

然后在网址中显示您想要的/auth/signup?cell=1654654654

注意：

如果在您的路径中包含组件中的单元格，如：/auth/signup/:cell和routelink，如：[routerLink]="['Signup', {cell: '1654654654'}]"，则url将显示为：auth/signup/1654654654

Answer 5

接受的答案已经过时，恕我直言不回答这个问题。

然而问题不明确：“路线参数”位于网址的路径部分，但问题是关于“查询参数”，它们位于“？”之后（问号）。

所以问题的答案在answer of @Akash：你必须使用

[queryParams]="{name: value}"

在模板中。

所以这个锚将引用/path/with/myparam?cell=1654654654：

<a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]"
   [queryParams]="{cell: 1654654654}"
></a>

如何在[routerLink] angular 2中传递路由参数

5 个答案: