小编Fab*_*sco的帖子

如何将Angular Elements与“ ng g库”方法混合使用?

如您所知,“ ng g库”方法可帮助我们创建可重用组件的库。但是,如果我希望通过Angular Elements的支持将那些组件编译为Web组件呢?不仅如此,库中的每个组件都将被编译到其自己的文件夹或JS文件中。如何配置一个开发环境以实现这一目标?

例如:

如果创建一个Lib并添加一个自定义组件,我知道我可以对其进行编译,生成一系列文件夹,例如esm5,esm2015,fesm5等。现在,问题是:如何添加,比如说30个自定义组件到我的库中,然后在编译时,它将为每个组件创建一个文件夹,其中包含它们的Web组件版本...仿佛Angular Elements遍历了我的组件库并生成了每个组件的Web组件版本。

像这样:

lib/
lib/custom/comp1
lib/custom/comp2
lib/custom/comp3
lib/custom/comp4
Run Code Online (Sandbox Code Playgroud)

变成类似以下内容:

Dist/
Dist/custom/
Dist/custom/bundle
Dist/custom/esm5
Dist/custom/esm2015
Dist/custom/comp1_web_independend_component_version
Dist/custom/comp2_web_independend_component_version
Dist/custom/comp3_web_independend_component_version
Dist/custom/comp4_web_independend_component_version
Run Code Online (Sandbox Code Playgroud)

我找到的最接近的解决方案是这样的:

https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523

我还要求Angular CLI团队提供帮助:

https://github.com/angular/angular-cli/issues/13999

angular-cli angular ng-packagr angular-elements

20
推荐指数
1
解决办法
946
查看次数

如何使用AngularJS获取和设置HTML标记的属性值?

我试图通过使用AngularJS找到获取和设置HTML标记中的属性值的最佳方法.例:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="1234567890">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后,当我调用url'/ home'时,我想从data-mycustomattr获取值(我将用于另一次计算),然后将其替换为"1",

如果url是'/ category',我想从data-mycustomattr获取值,并将其替换为"2".

使用jQuery非常简单:

$("#myPselector").attr('data-mycustomattr');
Run Code Online (Sandbox Code Playgroud)

要么

$("#myPselector").attr('data-mycustomattr','newValue');
Run Code Online (Sandbox Code Playgroud)

我使用了jQuery代码,将它放在我的控制器中,它工作正常.但据我所知,这可能是一个不好的做法.

但是,我发现使用指令的解决方案对于这么简单的任务来说太大了.所以我想知道在特殊情况下将jQuery和AngularJS结合起来可能不会太糟糕.

你怎么看?您是否有更好的解决方案来获取和设置属性的值?

ANSWER基于Jonathan的回复:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="{{mycustomattr}}">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后,进入控制器,我插入:

$scope.mycustomattr = '1';
Run Code Online (Sandbox Code Playgroud)

阅读:

if ($scope.mycustomattr == '1'){
    // code
}
Run Code Online (Sandbox Code Playgroud)

测试和工作正常.

html jquery angularjs

16
推荐指数
1
解决办法
4万
查看次数

RDFa面包屑

当您使用ul元素格式化面包屑(旨在获得更好的Google搜索结果)时,如何定义RDFa标记?我问的原因是li元素是彼此的兄弟姐妹,而不是孩子.我做的事情如下:

<div class="dv_breadcrumbs">
  <ul xmlns:v="http://rdf.data-vocabulary.org/#">
    <li typeof="v:Breadcrumb"><a title="Level1" href="/level1" rel="v:url"><span property="v:title">Level1</span></a></li>
    <li typeof="v:Breadcrumb"><a title="Level2" href="/level2" rel="v:url"><span property="v:title">Level2</span></a></li>
    <li typeof="v:Breadcrumb"><a title="Level3" href="/level3" rel="v:url"><span property="v:title">Level3</span></a></li>
    <li typeof="v:Breadcrumb"><a title="lever4" href="/level4" rel="v:url"><span property="v:title">Level4</span></a></li>
    <li typeof="v:Breadcrumb"><a class="currentLevel" title="Current Level" rel="v:url" property="v:title">Current Level</a></li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

这是对的吗?搜索引擎会理解面包屑项是否在ul元素内依次排列?

seo rdf rdfa rich-snippets

5
推荐指数
1
解决办法
7182
查看次数

使用AngularJS上的nd-repeat创建代表未来20年的数字的下拉菜单的最佳方法是什么?

使用AngularJS上的nd-repeat创建代表未来20年的数字的下拉菜单的最佳方法是什么?动态地获得第一年(当前年份)会很好.

那么使用迭代器来减少一年中的月份(1..12)呢?

注意:我在这里找到了一个好主意:http: //www.zzzxo.com/q/answers-angularjs-for-loop-with-numbers-ranges-11873570.html

但是,我想知道是否有更短的方式.

angularjs

4
推荐指数
1
解决办法
1万
查看次数