如您所知,“ 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团队提供帮助:
我试图通过使用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结合起来可能不会太糟糕.
你怎么看?您是否有更好的解决方案来获取和设置属性的值?
<!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)
测试和工作正常.
当您使用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元素内依次排列?
使用AngularJS上的nd-repeat创建代表未来20年的数字的下拉菜单的最佳方法是什么?动态地获得第一年(当前年份)会很好.
那么使用迭代器来减少一年中的月份(1..12)呢?
注意:我在这里找到了一个好主意:http: //www.zzzxo.com/q/answers-angularjs-for-loop-with-numbers-ranges-11873570.html
但是,我想知道是否有更短的方式.