Question

当使用angular2时，我绑定到meta标签属性，我得到一些奇怪的结果。例如，如果我有以下绑定。

 <meta name="{{x}}">

和x被解析为＆＃34; hello＆＃34;，HTML输出将是

 <hello></hello>

或者，当我添加第二个属性时，这将成为hello标记的一个属性。我发现了一些关于angular2无法以良好方式处理元标记的信息，但这个特殊问题很奇怪。有没有想过是否可以进行某种绑定？

（注意，我尝试了其他绑定方式，在其他标签中也可以使用，meta标签只是搞砸了）

代码

  @Component({
selector: 'head',
template:
        `
             <meta name="viewport" content="width=device-width, initial-scale=1">
             <meta name="{{testVariable}}">
             <base href="/">
             <title></title>
        `

}）

输出（testVariable是helloworld）

 ...
 <body>
<helloworld></helloworld>
<base href="/">

使用最新版本的angular2

Answer 1

我无法重现这个问题。 Plunker example

这种方法也不会给你带来太大的影响，因为当Angular添加根组件时，您的<head>标记将被擦除并被根组件的模板替换。也无法将<body>xxx</body>元素添加到根组件的模板中，因为<head>不能包含<body>元素。

使用<html>作为选择器仍会出现问题：<head>标记将被清除（CSS，脚本标记，...删除所有内容）。

您可能需要的是Title服务。目前<title>是唯一直接支持的<head>代码，但计划的内容更多。

在此期间，您可以将Title服务作为模板并构建自己的服务以支持更多代码，或者您可以强制更改代码document.head.querySelector...

Angular2绑定元标记奇数结果

1 个答案: