gpt4 book ai didi

dart - 在Angular Dart组件中使用Bootjack组件

转载 作者:行者123 更新时间:2023-12-03 03:46:36 25 4
gpt4 key购买 nike

我正在尝试为我的项目使用Angular Dart和Bootjack。我有一个小的测试程序,其中编写了一个使用Bootjack下拉菜单的组件,但是onclick似乎不起作用。如果我将相同的html代码放在main.html中,则它可以正常工作,但是从组件的html内部就无法工作。这是我当前正在使用的代码。

mytest.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>MyTest</title>
<link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css">
<link rel="stylesheet" href="packages/bootjack/css/bootstrap-theme.min.css">
</head>
<body>

<testing></testing>

<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="mytest.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

mytest.dart

library myTest;

import 'dart:html';
import 'package:bootjack/bootjack.dart';

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import '../lib/test/test_component.dart';

void main() {
applicationFactory()
.addModule(new MyAppModule())
.run();
}

class MyAppModule extends Module {
MyAppModule() {
type(TestingComponent);
}
}

test_component.html

<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

test_component.dart

library testing;

import 'package:angular/angular.dart';
import 'package:bootjack/bootjack.dart';

@Component(
visibility: Directive.CHILDREN_VISIBILITY,
selector: 'testing',
templateUrl: '../lib/test/test_component.html',
publishAs: 'cmp',
applyAuthorStyles: true)

class TestingComponent {
TestingComponent() {
Dropdown.use();
}
}

当前,我在TestingComponent类中具有Dropdown.use(),但是如果我在其中也具有main(),则它不起作用。有人对我在做什么错有任何想法吗?

最佳答案

据我所知,BootJack不支持shadowDOM。
当您设置Angular组件的属性'useShadowDom' : false时,它可能会起作用。

关于dart - 在Angular Dart组件中使用Bootjack组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23895624/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com