Angular 在子对象内部使用时，角管道不起作用_Angular_Dart_Angular Dart

Angular 在子对象内部使用时，角管道不起作用

angular dart

Angular 在子对象内部使用时，角管道不起作用,angular,dart,angular-dart,Angular,Dart,Angular Dart,我遇到了一个问题，这似乎是一个角度错误，除非我用错了为了重现这个问题，我定义了一个简单的管道，它只是在输入端附加一个随机数： @Pipe("RandomPipe10") class RandomPipe10 extends PipeTransform { String transform(String input) { return input + Random().nextInt(10).toString(); } } 然后，我定义了一个简单的组件，以确认管道能够自行工作：

我遇到了一个问题，这似乎是一个角度错误，除非我用错了

为了重现这个问题，我定义了一个简单的管道，它只是在输入端附加一个随机数：

@Pipe("RandomPipe10")
class RandomPipe10 extends PipeTransform {
  String transform(String input) {
    return input + Random().nextInt(10).toString();
  }
}

然后，我定义了一个简单的组件，以确认管道能够自行工作：

@Component(
  selector: "bug-pipe-test",
  // language=HTML
  template: """
      Testing Pipe inside ContentChildren
      <br />
      This works: {{ 'blah1' | RandomPipe10 }}
    """,
  directives: const [
    BugPipeTestChild,
    NgFor,
    NgTemplateOutlet,
  ],
  pipes: const [
    RandomPipe10,
  ],
)
class BugPipeTest {}

现在，让我们定义一个可以用于添加组件的指令：

@Directive(selector: "[contentDirective]")
class ContentDirective {
  final TemplateRef template;

  ContentDirective(this.template) {
    template.createEmbeddedView();
  }
}

让我们定义第二个组件：

@Component(
  selector: "bug-pipe-test-child",
  // language=HTML
  template: """
    <hr>
    <template ngFor let-item [ngForOf]="contentItems ?? []">
        <div class="flex-grow:0 dark">
            <template [ngTemplateOutlet]="item.template">
            </template>
            This works: {{ 'blah' | RandomPipe10 }}
        </div>
    </template>
    <hr>
  """,
  directives: const [
    NgFor,
    NgTemplateOutlet,
    ContentDirective,
  ],
  pipes: const [
    RandomPipe10,
  ],
)
class BugPipeTestChild {
  @Input()
  @ContentChildren(ContentDirective)
  List<ContentDirective> contentItems = <ContentDirective>[];
}

这也会输出正确的输出，与上面明显不同的随机数类似：

      <bug-pipe-test-child>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>

但这也带来了同样的错误：

      <bug-pipe-test-child>
          <div *contentDirective [attr.blah]="'blah' | RandomPipe10">
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>

生成的

bug pipe test.template.dart

如下所示

  @override
  ComponentRef<import1.BugPipeTest> build() {
    final doc = import8.document;
    _el_0 = doc.createElement('div');
    final _text_1 = import11.appendText(_el_0, 'BLAH');
    _pipe_RandomPipe10_0_1 = import13.pureProxy1(import9.unsafeCast<ViewBugPipeTest0>(parentView)._pipe_RandomPipe10_0.transform);
    init1(_el_0);
  }

这会抛出同样的错误

      <bug-pipe-test-child>
          <div *contentDirective [attr.blah]="'blah' | uppercase">
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>


{{'BLAH'}}
{{'BLAH'}}

      <bug-pipe-test-child>
          <div *contentDirective>
             {{ 'BLAH' | RandomPipe10 }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>

dart_sdk.js:97372 EXCEPTION: TypeError: Cannot read property 'bind' of undefined
STACKTRACE: 
dart:sdk_internal 3900:20                                        bind
package:lulacomponents/test/bug-pipe-test.template.dart 114:120  build
package:angular/src/core/linker/app_view.dart 244:12             create
package:angular/src/core/linker/template_ref.dart 28:9           createEmbeddedView
package:lulacomponents/test/bug-pipe-test.dart 82:14             new
package:lulacomponents/test/bug-pipe-test.template.dart 65:37    build
package:angular/src/core/linker/app_view.dart 244:12             create
package:lulacomponents/test/bug-pipe-test.template.dart 156:17   build
package:angular/src/core/linker/app_view.dart 258:12             createHostView
package:angular/src/core/linker/component_factory.dart 104:20    create
package:angular/src/core/application_ref.dart 70:41              <fn>
package:angular/src/core/change_detection/host.dart 247:26       <fn>
package:angular/src/core/zone/ng_zone.dart 132:18                <fn>
dart:sdk_internal 30626:14                                       run
package:angular/src/core/zone/ng_zone.dart 129:18                [_run]
dart:sdk_internal 30943:14                                       run
package:angular/src/core/zone/ng_zone.dart 291:23                run
package:angular/src/core/application_ref.dart 139:52             runInZone
package:angular/src/core/change_detection/host.dart 245:5        run
package:angular/src/core/application_ref.dart 69:23              bootstrap
package:angular/src/bootstrap/run.dart 207:16                    runApp
bug_pipe.dart 5:2                                                main
%3Canonymous%3E 1:8                                              <fn>
dwds/src/injected/client.js 8188:15                              runMain
dwds/src/injected/client.js 22128:19                             <fn>
dwds/src/injected/client.js 3550:15                              $protected
dwds/src/injected/client.js 10697:12                             call$2
dwds/src/injected/client.js 3514:20                              _asyncStartSync
dwds/src/injected/client.js 22140:16                             $call$body$main__closure
dwds/src/injected/client.js 22072:19                             call$1
dwds/src/injected/client.js 3852:16                              _rootRunUnary
dwds/src/injected/client.js 12004:128                            runUnary$2$2
dwds/src/injected/client.js 11932:14                             runUnaryGuarded$1$2
dwds/src/injected/client.js 11491:19                             _sendData$1
dwds/src/injected/client.js 11645:62                             perform$1
dwds/src/injected/client.js 11694:14                             call$0
dwds/src/injected/client.js 3715:21                              _microtaskLoop
dwds/src/injected/client.js 3721:11                              _startMicrotaskLoop
dwds/src/injected/client.js 10572:9                              call$1
dwds/src/injected/client.js 1169:26                              invokeClosure
dwds/src/injected/client.js 1188:18                              <fn>

dart_sdk.js:97372 EXCEPTION: TypeError: Cannot read property 'bind' of undefined
STACKTRACE: 
dart:sdk_internal 3900:20                                        bind
package:lulacomponents/test/bug-pipe-test.template.dart 114:120  build
package:angular/src/core/linker/app_view.dart 244:12             create
package:angular/src/core/linker/template_ref.dart 28:9           createEmbeddedView
package:lulacomponents/test/bug-pipe-test.dart 82:14             new
package:lulacomponents/test/bug-pipe-test.template.dart 65:37    build
package:angular/src/core/linker/app_view.dart 244:12             create
package:lulacomponents/test/bug-pipe-test.template.dart 156:17   build
package:angular/src/core/linker/app_view.dart 258:12             createHostView
package:angular/src/core/linker/component_factory.dart 104:20    create
package:angular/src/core/application_ref.dart 70:41              <fn>
package:angular/src/core/change_detection/host.dart 247:26       <fn>
package:angular/src/core/zone/ng_zone.dart 132:18                <fn>
dart:sdk_internal 30626:14                                       run
package:angular/src/core/zone/ng_zone.dart 129:18                [_run]
dart:sdk_internal 30943:14                                       run
package:angular/src/core/zone/ng_zone.dart 291:23                run
package:angular/src/core/application_ref.dart 139:52             runInZone
package:angular/src/core/change_detection/host.dart 245:5        run
package:angular/src/core/application_ref.dart 69:23              bootstrap
package:angular/src/bootstrap/run.dart 207:16                    runApp
bug_pipe.dart 5:2                                                main

      <bug-pipe-test-child>
          <div *contentDirective [attr.blah]="'blah'">
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>

      <bug-pipe-test-child>
          <div *contentDirective [attr.blah]="'blah' | RandomPipe10">
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>

dart_sdk.js:97372 EXCEPTION: TypeError: Cannot read property 'bind' of undefined
STACKTRACE:

  @override
  ComponentRef<import1.BugPipeTest> build() {
    final doc = import8.document;
    _el_0 = doc.createElement('div');
    final _text_1 = import11.appendText(_el_0, 'BLAH');
    _pipe_RandomPipe10_0_1 = import13.pureProxy1(import9.unsafeCast<ViewBugPipeTest0>(parentView)._pipe_RandomPipe10_0.transform);
    init1(_el_0);
  }

      This works: {{ 'blah1' | RandomPipe10 | uppercase }}

      <bug-pipe-test-child>
          <div *contentDirective [attr.blah]="'blah' | uppercase">
             {{ 'BLAH' }}
          </div>
          <div *contentDirective>
             {{ 'BLAH' }}
          </div>
      </bug-pipe-test-child>