Question

我正在尝试将Angular Dart和Bootjack用于我的项目。我有一个小测试程序，其中我编写了一个使用Bootjack下拉列表的组件，但是onclick似乎没有工作。如果我在main.html中放置相同的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（）中也有效。有没有人对我做错了什么有任何想法？

Answer 1

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

在Angular Dart组件中使用Bootjack组件

1 个答案: