Question

Angular v5.0.1

我在组件上有这个模板

<div #content>some content</div>
<some-component [content]="content"></some-component>

我想通过#content将SomeComponent变量的引用传递给@Input()content，但我不确定该变量的类型。

我在网上搜索的内容似乎是ElementRef，所以我做了

  @Input()
  component: ElementRef;
  ngOnInit() {
    console.log(this.component); // this prints the html element on console
    console.log(this.component.nativeElement); // this prints undefined
  }

但this.component.nativeElement 未定义

进行更多测试似乎 this.component 实际上是原生元素

做这样的事情很有效，实际上背景颜色已经改变了（这只是为了测试目的而我实际上没有用这种方式改变颜色）

this.component.style.backgroundColor = 'red';

虽然我按照我想要的方式工作，但我有一些问题需要更好地了解事情的运作方式。

#content是原生元素，而不是ElementRef？
这是将引用变量传递给另一个组件的有效Angular方式吗？

如果您认为这种方法有误或者是更好的方法，请提供一些有效的示例。

Answer 1

ngAfterViewInit()可能为时尚早。 ngAfterViewInit() { console.log(this.component); // this prints the html element on console console.log(this.component.nativeElement); // this prints undefined }可能会有效：

#content

ElementRef是原生元素，而不是#content吗？

如果nativeElement位于普通元素上，则为Started by user XXX Building remotely on Tobias_testnod (Excel) in workspace <PATH_TO_WORKSPACE> Cleaning local Directory XXX/YYY java.nio.file.DirectoryNotEmptyException: C:\<path_>\.svn\pristine at sun.nio.fs.WindowsFileSystemProvider.implDelete(Unknown Source) at sun.nio.fs.AbstractFileSystemProvider.deleteIfExists(Unknown Source) at java.nio.file.Files.deleteIfExists(Unknown Source) at hudson.Util.tryOnceDeleteFile(Util.java:290) at hudson.Util.tryOnceDeleteRecursive(Util.java:370) at hudson.Util.tryOnceDeleteContentsRecursive(Util.java:389) at hudson.Util.tryOnceDeleteRecursive(Util.java:369) at hudson.Util.tryOnceDeleteContentsRecursive(Util.java:389) at hudson.Util.deleteContentsRecursive(Util.java:225) Also: hudson.remoting.Channel$CallSiteStackTrace: Remote call to JNLP4-connect connection from <HOST> at hudson.remoting.Channel.attachCallSiteStackTrace(Channel.java:1655) at hudson.remoting.UserResponse.retrieve(UserRequest.java:308) at hudson.remoting.Channel.call(Channel.java:904) at hudson.FilePath.act(FilePath.java:986) at hudson.FilePath.act(FilePath.java:975) at hudson.scm.SubversionSCM.checkout(SubversionSCM.java:902) at hudson.scm.SubversionSCM.checkout(SubversionSCM.java:838) at hudson.scm.SCM.checkout(SCM.java:495) at hudson.model.AbstractProject.checkout(AbstractProject.java:1202) at hudson.model.AbstractBuild$AbstractBuildExecution.defaultCheckout(AbstractBuild.java:574) at jenkins.scm.SCMCheckoutStrategy.checkout(SCMCheckoutStrategy.java:86) at hudson.model.AbstractBuild$AbstractBuildExecution.run(AbstractBuild.java:499) at hudson.model.Run.execute(Run.java:1724) at hudson.model.FreeStyleBuild.run(FreeStyleBuild.java:43) at hudson.model.ResourceController.execute(ResourceController.java:97) at hudson.model.Executor.run(Executor.java:421) Caused: java.io.IOException: Unable to delete <PATH>. Tried 3 times (of a maximum of 3) waiting 0,1 sec between attempts. at hudson.Util.deleteContentsRecursive(Util.java:230) at hudson.scm.subversion.CheckoutUpdater$1.perform(CheckoutUpdater.java:81) at hudson.scm.subversion.WorkspaceUpdater$UpdateTask.delegateTo(WorkspaceUpdater.java:162) at hudson.scm.SubversionSCM$CheckOutTask.perform(SubversionSCM.java:1001) at hudson.scm.SubversionSCM$CheckOutTask.invoke(SubversionSCM.java:977) at hudson.scm.SubversionSCM$CheckOutTask.invoke(SubversionSCM.java:953) at hudson.FilePath$FileCallableWrapper.call(FilePath.java:2760) at hudson.remoting.UserRequest.perform(UserRequest.java:205) at hudson.remoting.UserRequest.perform(UserRequest.java:52) at hudson.remoting.Request$2.run(Request.java:356) at hudson.remoting.InterceptingExecutorService$1.call(InterceptingExecutorService.java:72) at java.util.concurrent.FutureTask.run(Unknown Source) at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) at hudson.remoting.Engine$1$1.run(Engine.java:98) at java.lang.Thread.run(Unknown Source) Caused: java.io.IOException: remote file operation failed: <PATH_TO_WORKSPACE> at hudson.remoting.Channel@1fe2698:JNLP4-connect connection from <HOST> at hudson.FilePath.act(FilePath.java:993) at hudson.FilePath.act(FilePath.java:975) at hudson.scm.SubversionSCM.checkout(SubversionSCM.java:902) at hudson.scm.SubversionSCM.checkout(SubversionSCM.java:838) at hudson.scm.SCM.checkout(SCM.java:495) at hudson.model.AbstractProject.checkout(AbstractProject.java:1202) at hudson.model.AbstractBuild$AbstractBuildExecution.defaultCheckout(AbstractBuild.java:574) at jenkins.scm.SCMCheckoutStrategy.checkout(SCMCheckoutStrategy.java:86) at hudson.model.AbstractBuild$AbstractBuildExecution.run(AbstractBuild.java:499) at hudson.model.Run.execute(Run.java:1724) at hudson.model.FreeStyleBuild.run(FreeStyleBuild.java:43) at hudson.model.ResourceController.execute(ResourceController.java:97) at hudson.model.Executor.run(Executor.java:421) Archiving artifacts 如果元素托管组件或指令，您将获得组件或指令实例。

模板引用变量为@Input（），用于其他组件

1 个答案: