각도 2 초 구성 요소가 작동하지 않습니까?

좋아, 내 애플 리케이션은 현재 두 개의 구성 요소가 하나의 모듈을 가지고, 하나는 내 애플 리케이션을 시작하는 부트 스트랩 갤러리입니다. 다른 하나는 내 메뉴 시스템이지만, 내 A2 앱은 구성 요소를 렌더링/실행하지 않는 것 같습니다.각도 2 초 구성 요소가 작동하지 않습니까?

모듈 :

import { NgModule }  from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MenuComponent } from '../components/menu'; 
import { GalleryComponent } from '../components/gallery'; 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule ], 
    declarations: [ GalleryComponent, MenuComponent ], 
    bootstrap: [ GalleryComponent ] 
}) 

export class AppModule { }

메뉴 :

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: '[data-menu]', 
    template: `<div></div>` 
}) 

export class MenuComponent { 
    constructor() { 
    console.log('test 99 - const.'); 
    } 
}

그래서 내 갤러리 구성 요소는 문제없이 작동 할 수, 괜찮습니다. 그러나 매우 간단한 테스트 메뉴 구성 요소를 테스트하려면 아무 것도하지 않는 것 같습니다. 구성 요소를 부트 스트랩하면 console.log가 실행됩니다. 대체 내가 뭘 잘못하고있는거야?

나는 A2.io 사이트에 있었고 몇 가지 테스트 예제를 반복해서 보았지만 여전히 작동하지 않는 이유는 알고 있습니다.

도와주세요.

편집

나는이 A2 애플 리케이션은 내가 가진 갤러리의 JSON API를 내장 무엇 심포니 2 내에서 실행하고 있다고 말했다 있어야합니다. 그래서

내가 (심포니의 간격) 나뭇 가지 템플릿을 가지고과 같이, 내 갤러리 내 데이터 섹터와 섹션 태그를로드

home.html.twig :

<main> 
    <div id="PublicGallery"> 

     <section data-my-app>// Loading //</section> <- this loads my gallery without any issues! 

    </div> 
</main>

을이 나는 위 내 nav 태그를 사용하려고했지만 두 번째 A2 구성 요소를 콘솔 로그로 가져올 수 없으므로이 작업을 수행하지 않았습니다. 내 생각

출처

2017-01-05 C0ol_Cod3r

갤러리 및 메뉴 사용 방법을 알려주세요. app.component.html에 추가 한 것 같습니다. 맞습니까? 메뉴에 다른 선택기를 사용하려고 했습니까? 그냥 "my-app-menu"처럼, 템플릿 컴파일러가 이상한 일을하고 있는지 다시 한번 확인하기 만하면됩니다. –

질문에 대답하기에 충분한 정보를 제공하지 않았습니다. 주어진 템플릿은 n 개의 구성 요소를 표시 할 수 있지만 어떤 방식으로도 묶여 있지 않은 두 개의 분리 된 구성 요소가있는 것처럼 보입니다. 더 많은 정보를 제공해 줄 수 있습니까? 예를 들어 다른 구성 요소와 템플릿을 표시 하시겠습니까? – dparsons

@ abszero 제 편집을 보시기 바랍니다. –

Twig 나 Symfony (또는 SystemJS가없는 부트 스트랩)에 대한 경험이 없으므로이 작업을 수행하기 위해 수행해야 할 작업에 대해 구체적으로 말할 수는 없습니다. 그것이 말하게되면서, 약간의 물건은 나에게 뛰어 내린다.

그래서 내 갤러리 구성 요소는 문제없이 작동합니다. 그러나 매우 간단한 테스트 메뉴 구성 요소를 테스트하려면 아무 것도하지 않는 것 같습니다.

실제로 두 구성 요소를 템플릿에 함께 묶어 놓은 곳에서는 제공 한 코드가 보이지 않습니다.

좋아, 현재 두 개의 구성 요소가 하나 개의 모듈을 가지고 그래서 내 애플 리케이션, 하나는 내가

무엇 가능성이 일어나고있는 것은 구성 요소는 부트 스트랩 있다는 것입니다 내 응용 프로그램을 시작하는 부트 스트랩 갤러리입니다 다른 구성 요소에 묶여 있지 않습니다. 아래의 발췌 문장은 현재 작업하고있는 응용 프로그램의 내용으로 사용자의 요구에 맞출 수 있어야합니다. 저는 Angular2에 얼마나 익숙한 지 모르기 때문에 이것을 매우 기본적인 수준으로 작성했습니다.

파일 : index.html을

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <base href="/"> 
    <title>Some App</title> 

    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <ngApp></ngApp> 
</body> 
</html>

당신은 당신이 비트를 무시할 수 있지만, 여기에서 정말 중요한 무엇인지 ngApp 태그가 SystemJS를 사용하지 않기 때문에. 이러한 태그를 응용 프로그램의 나머지 부분에 대한 진입 점으로 생각하십시오. 다음 구성 요소는이 태그를 출력 위치에 '마커'로 사용합니다.

파일 : 이것은 정말 상투적 인 코드와 관심이별로이지만, ngApp이 구성 요소의 선택임을 알

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ngApp', 
    templateUrl: './app.template.html' 
}) 

export class AppComponent { 
}

을 app.component.ts. 이것은 응용 프로그램을 진입 점에 연결시키는 첫 번째 부분입니다. 다음은이 구성 요소가 사용할 템플릿입니다.

파일 : app.template.html는

<nav> 
    <data-menu></data-menu> 
</nav> 
<gallery-component></gallery-component>

이 간단하지만 중요합니다. data-menu 및 gallery-component 태그는 이미 작성한 두 구성 요소가 표시되는 위치이지만 먼저 각 구성 요소를 수정해야합니다. 갤러리에서 선택기를 selector: 'gallery-component'으로 설정하고 메뉴에서 선택기를 selector: 'data-menu'으로 설정합니다. 다음으로 모듈을 설정해야합니다.

파일 : 우리가 AppComponent을 포함하는 것이 여기

import { NgModule }  from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MenuComponent } from '../components/menu'; 
import { GalleryComponent } from '../components/gallery'; 
import { AppComponent } from '../components/app.component'; 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule ], 
    declarations: [ AppComponent, GalleryComponent, MenuComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

공지 사항을 app.module.ts 그리고 우리가 부트 스트랩있는 구성 요소입니다. 마지막으로 주 파일이 올바른지 확인하는 것입니다.

파일 : main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

당신이 갤러리 위에 쌓인 메뉴 구성 요소가있는 브라우저 창을 표시한다이 시점에서 응용 프로그램을 실행하는 경우.

몇 이별의 생각은/당신은 분명히 templateUrl를 사용할 필요가 없습니다 당신이 원하는 경우 대신 template을 사용할 수 있습니다,하지만 난 템플릿 구성 요소 코드에 직접 구운 데 좋아하지 않는다

노트 .
질문에 대한 답변이 훨씬 짧습니다. 메뉴 컨트롤의 템플릿을 template: <div><gallery></gallery></div>과 같이 수정하면 메뉴가 부트 스트랩되고 selector 값이 'gallery' 인 것으로 가정합니다. 이것은 메뉴 구성 요소를 조리실 구성 요소에 단단히 연결하기 때문에 실제로는 유용하지 않습니다.
밀 결합의 경우 메뉴와 갤러리 구성 요소가 모두 앱 구성 요소와 밀접하게 결합되어 있습니다. 그것은 끔찍하게도 유용하지 않습니다. 대신 app.component를 router-outlet으로 설정해야 메뉴 옵션을 클릭 할 때 다른 구성 요소를 페이지에로드 할 수 있습니다.라우팅 및 탐색에 대해 읽을 수 있습니다. here

질문이 있거나 명확하지 않은 내용이 있으면 알려주십시오.

출처

2017-01-05 14:15:53 dparsons

많은 많은 감사합니다 - 일종의 매우 구체적인 답변을 읽기 전에 일하고 있어요. 나는 A2가 작동하는 과정이 마음에 들지 않는다는 것을 잘 모릅니다. 당신이 부팅하고 싶은 모든 자식 구성 요소를로드하려면 부모 구성 요소가 필요합니다. 일단 내 태그를 내 트위그 템플릿이 아닌 내 부트 스트랩 된 컴포넌트에 추가하면 코드가 생깁니다. 이유는 알 수 있습니다. 이런 방식으로 구성 요소를 작동시키는 것은 제가보기에 조금 이상하게 보입니까? 하지만 상위 구성 요소를 라우터 래퍼로 사용하는 것이 좋은 생각 인 것 같습니다. 많은 감사합니다 –

@ C0ol_Cod3r 반드시 이상하다고 생각하지는 않습니다. 그것은 사물을 생각하는 방식이 다릅니다. 특정 웹 페이지는 텍스트를 구성하는 여러 구성 요소와 텍스트를 담는 컨테이너 일뿐입니다. 위의 예에서 index.html은 실제 페이지이지만 app.component (특히 템플릿)는 페이지에있는 모든 항목의 주 컨테이너입니다. – dparsons

, 당신은 당신의 GalleryComponent보고하지 않고 GalleryComponent 템플릿

<div data-menu></div>

이 필요합니다. 나는 여기서 무슨 일이 일어 났는지 정말로 말할 수 없다.

출처

2017-01-05 03:25:54 lthh89vt

왜 그게 필요하겠습니까? A) 갤러리 구성 요소가 갤러리와 별개로 렌더링되기를 원하지 않습니다. B) 현재 두 번째 구성 요소는 콘솔 로깅 일 뿐이므로 데이터 메뉴를 추가해야하는 이유는 무엇입니까? -하지만 방금 데이터 메뉴 attr을 사용하여 Twig 템플릿에 nav 태그를 추가했습니다. 아무 것도 변경하지 않았습니다! –

각도 2 초 구성 요소가 작동하지 않습니까?

답변

관련 문제