Question

我是Angular的新手，我还在努力理解它。我已经按照微软虚拟学院的课程进行了测试，这很棒，但我发现他们所说的内容与我的代码行为之间存在一些差异！具体来说，我试图“将一个组件放在另一个组件中”，如下所示：

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

这是他们在课程上做的相同的例子，但在我的代码中不起作用！特别是VisualStudio告诉我，组件装饰器中不存在'directives'属性。我怎么解决这个问题？

Answer 1

您未将组件放入directives

您在@NgModule声明中注册：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

然后您只需将其放在父级的模板HTML中：<my-child></my-child>

那就是它。

Answer 2

如果删除指令属性，它应该可以工作。

_Exit()
_exit()
abort()
accept()
access()
aio_error()
aio_return()
aio_suspend()
alarm()
bind()
cfgetispeed()
cfgetospeed()
cfsetispeed()
cfsetospeed()
chdir()
chmod()
chown()
clock_gettime()
close()
connect()
creat()
dup()
dup2()
execl()
execle()
execv()
execve()
faccessat()
fchdir()
fchmod()
fchmodat()
fchown()
fchownat()
fcntl()
fdatasync()
fexecve()
ffs()
fork()
fstat()
fstatat()
fsync()
ftruncate()
futimens()
getegid()
geteuid()
getgid()
getgroups()
getpeername()
getpgrp()
getpid()
getppid()
getsockname()
getsockopt()
getuid()
htonl()
htons()
kill()
link()
linkat()
listen()
longjmp()
lseek()
lstat()
memccpy()
memchr()
memcmp()
memcpy()
memmove()
memset()
mkdir()
mkdirat()
mkfifo()
mkfifoat()
mknod()
mknodat()
ntohl()
ntohs()
open()
openat()
pause()
pipe()
poll()
posix_trace_event()
pselect()
pthread_kill()
pthread_self()
pthread_sigmask()
raise()
read()
readlink()
readlinkat()
recv()
recvfrom()
recvmsg()
rename()
renameat()
rmdir()
select()
sem_post()
send()
sendmsg()
sendto()
setgid()
setpgid()
setsid()
setsockopt()
setuid()
shutdown()
sigaction()
sigaddset()
sigdelset()
sigemptyset()
sigfillset()
sigismember()
siglongjmp()
signal()
sigpause()
sigpending()
sigprocmask()
sigqueue()
sigset()
sigsuspend()
sleep()
sockatmark()
socket()
socketpair()
stat()
stpcpy()
stpncpy()
strcat()
strchr()
strcmp()
strcpy()
strcspn()
strlen()
strncat()
strncmp()
strncpy()
strnlen()
strpbrk()
strrchr()
strspn()
strstr()
strtok_r()
symlink()
symlinkat()
tcdrain()
tcflow()
tcflush()
tcgetattr()
tcgetpgrp()
tcsendbreak()
tcsetattr()
tcsetpgrp()
time()
timer_getoverrun()
timer_gettime()
timer_settime()
times()
umask()
uname()
unlink()
unlinkat()
utime()
utimensat()
utimes()
wait()
waitpid()
wcpcpy()
wcpncpy()
wcscat()
wcschr()
wcscmp()
wcscpy()
wcscspn()
wcslen()
wcsncat()
wcsncmp()
wcsncpy()
wcsnlen()
wcspbrk()
wcsrchr()
wcsspn()
wcsstr()
wcstok()
wmemchr()
wmemcmp()
wmemcpy()
wmemmove()
wmemset()
write()

指令与组件类似，但它们在属性中使用。他们还有一个声明者If (Request.Cookies.Count > 0) Then sss.Visible = True Dim i as Ingeter For i = 0 To (Request.Cookies.Count - 1) sss.InnerHtml = sss.InnerHtml + Request.Cookies.Get(i).Name + " = " + Request.Cookies.Get(i).Value + vbCrLf Next End If。您可以阅读有关指令Structural Directives和Attribute Directives的更多信息。

还有另外两种Angular指令，广泛描述   其他地方：（1）组件和（2）属性指令。

组件以本机HTML的方式管理HTML区域   元件。从技术上讲，这是一个带模板的指令。

此外，如果您打开词汇表，您会发现组件也是指令。

Directives属于以下类别之一：



Components将应用程序逻辑与HTML模板相结合以呈现应用程序视图。组件通常表示为HTML   元素。它们是Angular应用程序的构建块。



Attribute directives可以侦听和修改其他HTML元素，属性，属性和组件的行为。他们是   通常表示为HTML属性，因此名称。



Structural directives负责整理或重塑HTML布局，通常通过添加，删除或操作元素   和他们的孩子。

组件具有模板的区别。请参阅Angular Architecture概述。

指令是一个带有@Component({ selector: 'parent', template: ` <h1>Parent Component</h1> <child></child> ` }) export class ParentComponent{} @Component({ selector: 'child', template: ` <h4>Child Component</h4> ` }) export class ChildComponent{}装饰器的类。一个组件是一个指令上带有一个模板;一个@Directive装饰者实际上是一个 @Directive装饰器扩展了面向模板的功能。

@Component元数据没有@Directive属性。见Component decorator。

Answer 3

我认为你的Angular-2版本指令在组件装饰器中不受支持，因此你必须注册指令与 @NgModule 中的其他组件相同，然后导入如下组件，也从装饰器中删除directives: [ChildComponent]。

import {myDirective} from './myDirective';

如何将组件放在Angular2中的另一个组件中？

3 个答案:

Directives属于以下类别之一：